17

Crear menu de navegación de dos niveles para tus secciones

Publicado por Nikko el dia 17 Sep 2008 - Guardado en 1,132 Views CSS, WordPress, Diseño Web 1,132 Views

seccionesdoblefila.jpg

Si han estado siguiendo algunas de las tendencias en los themes Wordpress Premium, probablemente habrán notado que los dos niveles en menú de navegación se han ido convirtiendo en algo muy popular o frecuente de ver, quizás más aun, en aquellos diseños estilo magazine que suelen poseer muchas secciones con información. Este estilo de menú puede utilizarse en infinidad de maneras, pero lo más común es mostrar las paginas principales, donde al posar nuestro ratón sobre uno de los títulos nos mostrara en un segundo nivel todas las subpáginas que contenga dicha sección. Como lograrlo en worpdress? de esta forma:

PLAIN TEXT
PHP:
  1. <ul id="nav">
  2. <?php wp_list_pages('title_li=&depth=1'); ?>
  3. </ul>
  4.  
  5. <?php if($post->post_parent)
  6. $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
  7. $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
  8. if ($children) { ?>
  9. <ul id="subnav">
  10. <?php echo $children; ?>
  11. </ul>
  12. <?php } else { ?>
  13. <?php } ?>

un poco de estilo

PLAIN TEXT
CSS:
  1. * {
  2.     margin:0;
  3.     padding:0
  4.     }
  5.  
  6. #nav {
  7.     background:#577da2;
  8.     border-bottom:1px solid #FFF;
  9.     height:32px;
  10.     }
  11.  
  12. #nav li {
  13.     margin-right:25px;
  14.     }
  15.  
  16. #nav li, #subnav li {
  17.     float:left;
  18.     list-style:none
  19.     }
  20.  
  21. #nav a, #nav a:visited {
  22.     color:#FFF;
  23.     text-decoration:none;
  24.     font-weight:bold
  25.     }
  26.  
  27. #nav a:hover, #nav a:active,
  28. li.current_page_parent a,
  29. li.current_page_parent a:visited,
  30. #nav li.current_page_item a,
  31. #nav li.current_page_item a:visited
  32.         {
  33.     background:#295887
  34.     }
  35.  
  36. #subnav {
  37.     background:#e6eef7;
  38.     border-top:2px solid #577da2;
  39.     border-bottom:2px solid #cad8e6;
  40.     height:28px;
  41.     }
  42.  
  43. #subnav li {
  44.     border-right:1px solid #295887;
  45.     padding:0 7px;
  46.     }   
  47.  
  48. #subnav a, #subnav a:visited {
  49.     color:#295887;
  50.     text-decoration:none;
  51.     font-weight:bold
  52.     }
  53.  
  54. #subnav a:hover, #subnav a:active,
  55. #subnav li.current_page_item a,
  56. #subnav li.current_page_item a:visited {
  57.     text-decoration:underline
  58.     }

Mas informacion darrenhoyt

delicious, digg, barrapunto, meneame, digg , technorati , stumble it!
comentarios
  1. Liliana - Gravatar

    Liliana

    17 - 09 - 2008

    Permalink

    Hola,
    Estoy trabajando en un proyecto un poco complicado. Tengo un sitio dividido en varias secciones. Y cada una de ellas está compuesta por 4 divs dinámicos. Lo queme está pasando es que sólo me toma la seción default y cuando clikeo para ir a otras secciones solo me muestra lo que está predefinido en la página plantilla (lo estático) y no me muestra las cosas dinámicas. Algún comentario o ayuda?

    Muchísimas gracias.
    Liliana



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: