En el siguiente tutorial les mostraremos cómo pueden desplegar sub-categorías en un dropdown animado con WordPress y de qué manera se pueden crear dropdowns para sub-páginas.
Se trata de un código muy fácil de programar con el que no tendrán ningún tipo de problemas. Al final, editaremos el CSS para que vaya de acuerdo a nuestro tema.
1. Subir los archivos
Baja el archivo dropdown.zip, descomprímelo y sube las dos carpetas que contiene en la carpeta de tu tema. Por ejemplo:
yoursite.com/wp-content/themes/yourtheme/inc
yoursite.com/wp-content/themes/yourtheme/js
2. Edita tu cabecera
Abre header.php dentro de los archivos de tu tema y busca la siguiente línea:
Antes que eso, pega lo siguiente. Esto llamará a todo el JavaScript que necesitamos usar:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(’template_directory’); ?>/js/superfish.js”></script>
<script type=”text/javascript”> jQuery(function(){
jQuery(‘ul.sf-menu’).superfish();
});
</script>
Nota: Utilizamos la versión de jQuery que hostea Google porque está en un dominio diferente que el nuestro y de esta forma, los usuarios pueden descargar más archivos simultáneamente mientras se carga el sitio. Además muchos sitios utilizan este link por lo que es probable que lo tengan en su caché y no sea necesario que lo descarguen.
3. Agrega tu navegación de página y categoría
Depende de tí el lugar de tu template en donde colocas esto. Por el hecho de que es un menú dropdown desearás hacerlo horizontal, así que tu archivo header.php será usualmente el lugar más apropiado donde comenzar a buscar, pero como cada tema es diferente deberás encontrar el sitio correcto por ti mismo.
Para añadir la navegación de categoría, pega el siguiente código en dónde desees que esté:
<div id=”cat”>
<?php include (TEMPLATEPATH . ‘/inc/catnav.php’); ?>
</div>
Para la navegación de página, usa lo siguiente:
<div id=”navi”>
<?php include (TEMPLATEPATH . ‘/inc/navi.php’); ?>
</div>
4. Edita el CSS
Abre el archivo style.css de tu tema y pega lo siguiente al final:
/* Navegación de Página con Dropdown */
#navi{height:29px;background:transparent;display:block;padding:0;font:normal 18px Arial,sans-serif;text-transform:uppercase;}
#menu ,#menu ul {margin: 0;padding: 0;list-style: none;height:29px;}
#menu a {color: #666;display: block;padding: 4px 10px 6px 10px;}
#menu a:hover {color: #ccc;display:block;text-decoration: none;background:#0066cc;} /* Diseño de enlaces cuando el mouse se posa encima de ellos */
#menu li {float: left;margin: 0;padding: 0;}
#menu li li {float: left;margin: 0 0 0 5px;padding: 0;width: 130px;}
#menu li li a, #menu li li a:link, #menu li li a:visited {background:#fff;width: 150px;float: none;margin: 0;padding: 4px 10px 5px 10px;color:#333;}
#menu li li a:hover, #menu li li a:active {background:#333;width: 150px;float: none;margin: 0;padding: 4px 10px 5px 10px;color:#fff;}
#menu li ul {position: absolute;width: 10em;left: -999em;z-index:1;}
#menu li:hover ul {left: auto;display: block;}
#menu li:hover ul, #menu li.sfhover ul {left: auto;}
#menu li.current_page_item a{background:#0066cc;color:#fff;} /* Diseño para la página en la que el usuario esté en ese momento (si se aplica) */
#menu li.current_page_item a:hover{color:#000;text-decoration:none;}
/* Navegación de Categorías con Dropdown */
.sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;font:normal 14px Arial,sans-serif;text-transform:uppercase;}
.sf-menu {line-height:1.0;height:31px;background:transparent;}
.sf-menu ul {position:absolute;top:-999em;width:10em; /* la compensación izquierda de submenús debe encajar (ver abajo) */}
.sf-menu ul li {width:100%;}
.sf-menu li:hover {visibility:inherit; /* arregla el ’sticky bug’ de IE7 */}
.sf-menu li {float:left;position:relative;}
.sf-menu a {display:block;position:relative;color:#666;}
.sf-menu li:hover ul,.sf-menu li.sfHover ul {left:0;top:30px; /* match top ul list item height */z-index:150;}
ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {top:-999em;}
ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {left:10em; /* match ul width */top:0;}
ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {top:-999em;}
ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul {left:10em; /* concuerda con el ancho de ul */top:0;}
.sf-menu {float:left;margin:0;width:100%;}
.sf-menu a {border-right:1px dotted #d7d7d7;padding: 8px 10px;text-decoration:none;color:#666;} /* Diseño de los enlaces del dropdown */
.sf-menu a, .sf-menu a:visited { /* selector visitado – IE6 aplicará color de texto*/color:#0066cc;}
.sf-menu li {background:transparent;color:#666;}
.sf-menu li li {background:#fff;}
.sf-menu li li li {background:#fff;}
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {background:#d7d7d7;outline:0;color:#0066cc;} /* Fondo = Colores de fondo del enlace cuando el mouse se posa encima */
.sf-menu li.current-cat a{background:#070707;color:#0066cc;}
.sf-menu li.current-cat a:hover{background:#666;color:#ccc;}
Si no te sientes muy confiado trabajando con CSS puedes utilizar el código de arriba como tu base. Sólo edita las partecitas que necesites (que no serán muchas) y pronto tendrás el diseño terminado.
Si disfrutaste nuestro artículo, siéntete libre de suscribirte a nuestro feed rss
