Menu desplegable para WordPress

Colocar un menu que soporte múltiples niveles en nuestro WordPress puede ayudar mucho a la navegación cuando tenemos gran cantidad de páginas y categorías. Haremos mas accesible el contenido pero también sabemos que no es tan facil hacer un menu desplegable en pocos pasos, así que podemos recurrir a instalar este plugin que nos hace todo mas facil.

La instalación es simple, solo debemos descargar el zip de wordpress.org, descomprimirlo y subirlo a nuestro directorio  /wp-content/plugins/

Desde la solapa Plugins de nuestro tablero, lo activamos y agregamos <?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} ?> en nuestro header.php (o en donde lo querramos implementar). El plugin cuenta con traducción al español incorporada, basta con tener nuestro WordPress configurado para mostrar dicho idioma.

Vamos a Multi-level menu CSS Generator page y colocamos los colores y estilos que deseamos aplicar en nuestro menu, presionamos Submit Design y buscamos el código CSS que se auto-genera en ese mismo sitio. Copiamos y pegamos en Opciones > Multilevel Navigation > Theme (aspecto) y aplicamos los cambios. En Contenidos del Menu indicamos los botones que necesitamos agregar y ya está listo para funcionar.

Uno de los problemas mas frecuentes del plugin se presenta con sliders de diferentes tipos, el menú se despliega por debajo del contenido del slider. La solución para la mayoría de los casos es agregar:

#suckerfishnav, #suckerfishnav ul {
float:left;
list-style:none;
line-height:40px;
padding:0;
margin:0;
z-index:1000;

Para la mayoría de los navegadores con esto solucionaremos el problema, pero para Internet Explorer la cosa nunca es tan simple y debemos agregar al header:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load ("jquery", "1.3.2", {uncompressed: false});</script>

<script type="text/javascript" language="JavaScript">
jQuery(function() {
var zIndexNumber = 1000;
jQuery('div').each(function() {
jQuery(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
</script>

Espero que les sea de utilidad!