SummArg | Cursos y recursos para webmasters

01/09/2009

Menu desplegable para WordPress

screenshot-3Colocar un menú que soporte múltiples niveles 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 fácil hacer un menú desplegable en pocos pasos, así que podemos recurrir a instalar este plugin que nos hace todo mas fácil.

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 en nuestro header.php (o en donde lo queramos implementar).

<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} ?>

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 menú, 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 Menú 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!

Dejar un comentario

  1. uldarico

    intente lo del menu de pixopoint y la verdad no lo pude modifica, lo puse se activo pero no pude modificar las opciones del menu.
    saludos cordiales

  2. Nekko

    Si no te resulta ese plugin, que en un pasado utilicé muchisimo sin problemas, podés fijarte este modo de hacer un menú dropdown que publicamos mas recientemente:
    http://www.summarg.com/2011/como-hacer-un-menu-desplegable-para-wordpress-con-jquery/

Dejar un comentario