Este tutorial es para aquellos que desean usar en su theme de WordPress, un menú desplegable multi-level, en pocos pasos y muy fácil de adaptar.
1 – En el archivo header.php de tu theme, añadimos este código JavaScript entre las etiquetas <head></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>
2 – Pegamos este código en el archivo header.php donde queremos mostrar nuestro menú. Normalmente WordPress lo muestra como wp_list_pages() , Si es el caso, lo remplazamos por el siguiente código:
<ul id="dropmenu">
<?php wp_list_pages('sort_column=menu_order&title_li='); ?>
</ul>
3 – Y para vestirlo un poco, pegamos esto en el style.css de nuestro Theme:
<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>
Hola.
Antes que nada gracias por compartir éste menú jQuery/CSS
Tengo un pequeño problema al instalarlo en BuddyPress 1.2.8 resulta que al pasar el mouse por los elementos del menú se despliegan bien los submenus pero al querer poner el cursor sobre éstos, desaparecen inmediatamente. Lo he probado en varios navegadores y el comportamiento es el mismo. Puedes verlo en http://ihpgmorelia.salgraphics.com/
Alguna idea?
Tienes que ponerle al menu css la propieda .z-index:+1; en tu css
Gracias Luis.
El problema resultó ser la etiqueta “margin-top” que tiene el CSS, creaba un “hueco”entre un elemento y otro y por eso se cerraba el menú. Simplemente cambie a “margin-top: 0″ y listo.
Muchas gracias!