SummArg | Cursos y recursos para webmasters

13/03/2011

Cómo hacer un menu desplegable para WordPress con jQuery?

Añadir menues de varios niveles para WordPress es muy facil si seguimos los pasos que nos indican desde SEOAdsenseThemes, en donde con un poco de CSS y utilizando jQuery, construiremos nuestro menú.

Demo

Para implementar este menu primero abriremos nuestro archivo header.php y colocaremos antes del cierre de </head>:

<?php wp_enqueue_script('jquery'); ?>
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery("#dropmenu ul").css({display: "none"}); // Opera Fix
jQuery("#dropmenu li").hover(function(){
jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);
},function(){
jQuery(this).find('ul:first').css({visibility: "hidden"});
});
});
</script>

En donde queremos colocar la barra de navegación colocaremos algo como:

<div id="menu">
<?php wp_list_pages('title_li=');
wp_list_categories('title_li='); ?>
</div>

Y finalmente un poco de CSS, que amoldaremos a nuestro gusto modificando colores, tipografías y demás.

<style type="text/css">
#dropmenu, #dropmenu ul {margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:300; width:100%; background:#fff; font-weight:bold;}
#dropmenu a {display:block; padding:0.25em 1em; color:#686868; border-right:1px solid #c8c8c8; text-decoration:none; background:#fff;}
#dropmenu a:hover {background:#888; color:#fff;}
#dropmenu li {float:left; position:relative;}
#dropmenu ul {position:absolute; display:none; width:12em; top:1.9em; left:-1px;}
#dropmenu ul a {border-left:1px solid #c8c8c8;}
#dropmenu li ul {border-top:1px solid #c8c8c8; width:14.1em;}
#dropmenu li ul a {width:12em; height:auto; float:left;  border-bottom:1px solid #c8c8c8;}
#dropmenu ul ul {top:auto;}
#dropmenu li ul ul {left:12em; margin:0px 0 0 10px;}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}
</style>

Listo para usar!

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Añadir menues de varios niveles para WordPress es muy facil si seguimos los pasos que nos indican desde SEOAdsenseThemes, en donde con un poco de CSS y utilizando jQuery, construiremos nuestro menú. Demo Para implementar este…..

Dejar un comentario