Lista de Categorías Desplegable
¿Estás cansado de tu vieja barra de navegación?. Si es así ¿que tal añadir una lista desplegable de categorías?, algo al estilo de los themes tipo revista.
Vamos a ver como hacer una lista desplegable de tus páginas y sub-páginas, incluyendo al final como mostrar tus categorías directamente en el menú.
¿Estas list@?. Vamos con ello …
HTML y PHP
Empezaremos usando las funciones internas de WordPress para obtener la lista de páginas y categorías. Edita el fichero header.php de tu plantilla y remplaza el antiguo código 'nav' por este otro:
-
<ul id="nav" class="clearfloat">
-
<li><a href="<?php echo get_option('home'); ?>/" class="on">Blog</a></li>
-
<?php wp_list_pages('title_li='); ?>
-
<li class="cat-item"><a href="#">Categorías</a>
-
<ul class="children">
-
<?php wp_list_categories('orderby=name&title_li=');
-
$this_category = get_category($cat);
-
if (get_category_children($this_category->cat_ID) != "") {
-
echo "</ul><ul>";
-
wp_list_categories('orderby=id&show_count=0&title_li=
-
&use_desc_for_title=1&child_of='.$this_category->cat_ID);
-
echo "</ul>";
-
}
-
?>
-
</li></ul>
Este código hará una lista de todas tus páginas y sub-páginas, así como una lista de las Categorías. Cuando un usuario coloque el cursor sobre el nivel superior de páginas o categorías se mostrará un desplegable de las sub-páginas/categorías.
CSS
A pesar de que el código anterior es completamente funcional, nuestro script necesita un poco de estilo CSS. Este en concreto, tomado del theme gratuito Mimbo, es perfecto para el ejemplo que estamos utilizando.
-
#nav{
-
background:#222;
-
font-size:1.1em;
-
}
-
#nav, #nav ul {
-
list-style: none;
-
line-height: 1;
-
}
-
#nav a, #nav a:hover {
-
display: block;
-
text-decoration: none;
-
border:none;
-
}
-
#nav li {
-
float: left;
-
list-style:none;
-
border-right:1px solid #a9a9a9;
-
}
-
#nav a, #nav a:visited {
-
display:block;
-
font-weight:bold;
-
color: #f5f5f4;
-
padding:6px 12px;
-
}
-
#nav a:hover, #nav a:active, .current_page_item a, #home .on {
-
background:#000;
-
text-decoration:none
-
}
-
#nav li ul {
-
position: absolute;
-
left: -999em;
-
height: auto;
-
width: 174px;
-
border-bottom: 1px solid #a9a9a9;
-
}
-
#nav li li {
-
width: 172px;
-
border-top: 1px solid #a9a9a9;
-
border-right: 1px solid #a9a9a9;
-
border-left: 1px solid #a9a9a9;
-
background: #777;
-
}
-
#nav li li a, #nav li li a:visited {
-
font-weight:normal;
-
font-size:0.9em;
-
color:#FFF;
-
}
-
#nav li li a:hover, #nav li li a:active {
-
background:#000;
-
}
-
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
-
left: auto;
-
}
-
a.main:hover {
-
background:none;
-
}
Javascript
Los navegadores actuales (Safari, Firefox, Opera, e incluso Internet Explorer 7) no tienen problemas con la clase ':hover' en elementos li. Pero, como seguro ya has imaginado, el viejo y obsoleto Internet Explorer 6 no puede con ellos.
Para hacer nuestro script compatible también con este caduco navegador (IE6), tenemos que cargar este pequeño, y poco molesto, código Javascript en la sección 'head' de nuestro documento HTML document, o incluso mejor en un fichero .js aparte.
-
<![CDATA[//><!--
-
sfHover = function() {
-
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
-
for (var i=0; i<sfEls.length; i++) {
-
sfEls[i].onmouseover=function() {
-
this.className+=” sfhover”;
-
}
-
sfEls[i].onmouseout=function() {
-
this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);
-
}
-
}
-
}
-
if (window.attachEvent) window.attachEvent(”onload”, sfHover);
-
//–><!]]>
Ya puedes ofrecer un aspecto profesional a tu blog con menús desplegables, que además son muy útiles para tus lectores.
Bitacoras
RSS
Blog EntreBlogs
Bocabit
Buscando Libertad
CiberPrensa
El Blog de
KnxDT
FreebsArg
Galaxia Blog
Ideas Geek
iPhoniac
Soy Plastic
Tecnodiva
Todos los Como
Verdadera Seducción
es justo lo que estoy necesitando!!! (entre otras cosas!), buenísimo el post!… pero, servirá para colocar arriba la lista que aparece actualmente sobre un costado de mi blog (el indice que está en un widguet)?… gracias!
Estimados. Muy buen porst. Pero tengo una duda. Es posible abarcar también páginas hijas de las sub-páginas. ???
Eso gracias.
Los enlaces en menú de este tipo, ¿son seguidos correctamente por los buscadores?
Saludos!
@emiliano, es precisamente para eso, pero para categorías y páginas.
@Sabogal, los buscadores leen el código de la página y el contenido de contexto ¿para que quieres que sigan tu lista de categorías cuando lo que importa es el contenido?
@rafasilva, si claro
yo uso un plugin y funsiona perfectamente solo se instalar y se agraga un codigo simple al header.php
Y el plugin es ?¿
[...] un blog para que muestre una página estática en vez de posts o mas avanzados como crear una lista desplegable de categorías. Así hasta mas de 40 trucos, la mayoría muy [...]
como entro a header.php?? jeje
Dany, desde tu aplicación de ftp o en el editor de archivos de tu WP.
dj duck, si no vas a decir cual es el plugin mejor no digas nada.
(Comentario editado por Guillermo, se quitaron ofensas)
Buenisimo post… estaba buscando esto!! Me queda una duda. ¿Es posible editarlo para que despliegue las sub-categorías de forma lateral al poner el ratón sobre la categoría? Ahora me salen las categorías y las subcategorías todas juntas y sin distinción y necesitaría que también las sub-categorías fueran desplegables.
Muchas gracias!
exelente post, hay muchos themes muy buenos pero no funcionales al tener muchas categorias en un blog
Hola. He usad el HTMl en http://www.f1inlive.com, pero tengo la duda de como intercambiar la posicion de Pilotos con cualquier otra categoria. Si os fijais, al usar el codigo cat_ID, me sale así. Quisrea saber si hay una solucion aparte de volver a escribir categorias.
Saludos
@AndresRv: ¿te refieres a darles otro orden en el listado?
no entiendo como “remplazar el antiguo codigo nav”… es decir… me podrías decir donde debería ponerlo con más precisión? (y que debería borrar)… mil gracias… mataría saber cual es ese plugin!!!… saludetes, emi
este va como loco:
ryans-suckerfish-wordpress-dropdown-menu