CategorÃas Desplegables [WordPress]
¿Has pensado alguna vez en utilizar un menú desplegable con todas tus categorÃas?
Esto es muy facil de lograr, aunque un poco lento si tienes pocos conocimientos en CSS como yo.
Empezaremos con los códigos necesarios para listar las categorÃas y sus sub-categorÃas. Normalmente se utiliza dentro del archivo header.php.
<?php wp_list_categories('sort_column=name&title_li=&depth=3&'); ?>
</ul>
Con ese simple código estamos haciendo un llamado a las categorÃas pero se listan de forma vertical y se ve feo. Entonces lo que nosotros debemos hacer esdarle un poco de CSS:
Les mostraré el código utilizado por mi para darle el efecto deseado. Ustedes deben editar este código y adaptarlo a los colores y tamaños de su web.
background: #494949;
width: 873px;
height: 27px;
color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family:"Trebuchet MS";
}
#subnav {
margin: 0px;
padding: 0px;
}
#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li {
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 11px;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF;
}
#subnav li a:hover, #subnav li a:active {
background: #707070;
color: #FFFFFF;
display: block;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #494949;
width: 120px;
heigth: 20px
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#subnav li li a:hover, #subnav li li a:active {
background: #707070;
margin: 0px;
padding: 5px 10px 5px 10px;
}
#subnav li {
float: left;
padding: 0px;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}
#subnav li li {
}
#subnav li ul a {
width: 140px;
}
#subnav li ul a:hover, #subnav li ul a:active {
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}
El CSS está creado con la etiqueta #subnav por tanto el código principal para las categorÃas deberá quedar de esta forma:
<ul id="subnav">
<?php wp_list_categories('sort_column=name&title_li=&depth=3&'); ?>
</ul>
</div>
Como verán es muy simple y pueden ver su funcionamiento en mi otro blog.
Nota: debo agradecer a Brian Gardner por su theme Revolution Church, ya que gracias a este theme les puedo enseñar a crear este simple menú desplegable.
03/12/2008
Post Relacionados
15 Comentarios en “CategorÃas Desplegables [WordPress]”
Deja un Comentario
Additional comments powered by BackType
Diciembre 4th, 2008 a las 1:27 pm
Información Bitacoras.com...
Si lo deseas, puedes hacer click para valorar este post en Bitacoras.com. Gracias....
Diciembre 19th, 2008 a las 10:12 pm
[...] CategorÃas WordPress en Menú Horizontal Desplegablewww.blooging.net/categorias-menu-horizontal-desplegable.html por Acsacsaro hace pocos segundos [...]
Enero 12th, 2009 a las 4:05 pm
no lo entiendo, concretamente donde hay que meter el php y donde el css?
Enero 26th, 2009 a las 4:01 pm
Hola :B
Lamento no haber respondido pero estaba de vacaciones y se me olvidó avisar xD
Ahora vamos a tu pregunta...
El php debes ponerlo donde tu quieras que se vea el menúy el css debes ponerlo dentro del archivo style.css que viene dentro de todos los temas de wordpress y listo.
Espero lo entiendas :B
Febrero 5th, 2009 a las 12:55 pm
Una pregunta...dice menu desplegable, eso significa que deberia desplegar las subcategorias cuando pongo el cursor sobre una categoria cualquiera, pero no lo hace
Gracias de todos modos :up:
Febrero 5th, 2009 a las 2:09 pm
lo siento mucho
Escribi mal el codigo, lo arreglare en este momento y espero te sirva
Nos vemos :up:
Febrero 5th, 2009 a las 3:44 pm
ahh no me funciona
habré escrito algo mal o en otro sitio?
no se xq no me funcionaaaa
nos vemos :up:
Febrero 5th, 2009 a las 3:48 pm
ohhh sorry sorry sorry
ya descubri xq no me funciona
es q tenia la opcion hide_empty=1,
y para probar el menu creé una categoria vacia
asi q cambiando a hide_empty=0 me funcionó super bien
muchas gracias y disculpa las molestias :up:
Febrero 5th, 2009 a las 8:52 pm
Que bueno que te haya servido :wink :
Espero verte de nuevo en el blog
Febrero 27th, 2009 a las 9:37 pm
[...] muestra un exelente tutorial para crear menús desplegables en Blogger. Es algo muy parecido a los Menús Desplegables de WordPress que hablamos hace un tiempo. Podemos ver un ejemplo de los menús desplegables en Blogger con el [...]
Abril 2nd, 2009 a las 5:15 am
Disculpa eso de hide empty, donde se pone, yo quiero hacer un menú asà pero con categorÃas vacÃas como puedo lograrlo? te agradecerÃa mucho tu orientación, saludos!!
Abril 3rd, 2009 a las 8:12 pm
@lumbreras: a que te refieres con "categorÃas vacÃas", que no tienen ninguna entrada? si es asÃ, solo debes crear una subcategorÃa de esa y escribir un post, luego aparecerá automáticamente en tu menú desplegable
Septiembre 24th, 2009 a las 9:01 pm
[...] here to see the original: CategorÃas Desplegables [WordPress] | Blooging Comments0 Leave a Reply Click here to cancel [...]
Agosto 24th, 2010 a las 7:30 am
¡Genial! Me has servido de inspiración y gracias a tus indicaciones he logrado hacer que el menú de nuestra web (www.abanlex.com) sea desplegable.
Agosto 24th, 2010 a las 5:13 pm
@Pablo Fdez. Burgueño: que bueno que te fue útil este post.
Saludos!