Hosting en inglés

alojamiento web con Webhostinghub
Hosting SSD con Raiola

¿Cómo mostrar las categorías de WordPress en un menú horizontal desplegable?

Recientemente un conocido me preguntó cómo podía crear una barra de menú horizontal de categorías para WordPress en plantillas que no tienen esa opción. La respuesta es por medio de CSS y Javascript.

El primer paso consiste en conseguir que WordPress muestre el menú como una lista jerárquica sin un título:


 

Seguidamente tomamos el siguiente código de WordPress y lo modificamos de tal manera que podamos darle el estilo que queramos a la barra:

 

El código anterior lo añadimos al archive header.php, sin embargo podemos colocarlo en cualquier otro sitio en que queramos que aparezca.

A continuación el código CSS es bastante sencillo y solo debemos incluirlo en el archivo style.css de la plantilla que queremos modificar:

ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	font-size:1.2em;
}

ul#menu li {
	float: left;
	padding: 0;
	margin: 0;
	border-right:solid 1px #fff;
}

ul#menu ul li {
	float: none;
	position: relative;
	border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */
	border-left: 1px solid #FFF;
	z-index:1000;
}

ul#menu li ul {
	margin: 0;
	padding: 0;
	display:none;
	list-style: none;
	position: absolute;
	background: #9CC;
}
ul#menu ul ul{
	margin-left: .2em;
	position: absolute;
	top: 0; /* if using borders, -1px to align top borders */
	left: 100%;
}

ul#menu * a:hover, ul#menu li a:active{
background:#7EAED7 !important;
color: #FFFFFF;
}

ul#menu li a:link,
ul#menu li a:visited,
ul#menu li a:hover,
ul#menu  li a:active{
	display: block;
	padding: .2em .3em;
	text-decoration: none;
	background: #5587B3;
	 color: #FFFFFF;
}


ul#menu ul li a:link,
ul#menu ul li a:visited,
ul#menu ul li a:hover,
ul#menu ul li a:active {
	width: 8em;
}

Por supuesto que debemos modificar los colores y tamaños de texto para asegurar que concuerden con el resto del sitio.

Ahora el último paso consiste en hacer que funcione como una lista desplegable (drop-down) en todos los navegadores. Esto puede hacerse en Firefox con una simple declaración CSS, pero Internet Explorer (versiones anteriores) no entiende las pseudo clases :hover, por lo cual incluimos el siguiente código Javascript:



 

Notas finales con respecto al código anterior:

  • Para activarlo debemos cambiar el tag <body> a <body onload=”mbSet(‘menu’;>
  • En ocasiones puede crear un error Javascript, pero la mayoría del tiempo funciona a la perfección.

 


SUSCRÍBETE SIN COSTO ALGUNO A NUESTRO BOLETÍN

Escribe tú correo electrónico:

Recibe contenido de este sitio sin costo alguno en tu e-mail. Solamente enviaremos los últimos artículos de Internetrcc, sin ningún tipo de spam

Acelera tu sitio

CDN para WordPress

Leave a Reply