Hace 2 días atrás, en el lugar donde estoy haciendo mi práctica profesional, se me encomendó la “bendita” misión de desarrollar el nuevo sitio web, para el área de desarrollo, la cual tiene como nombre Frontec, hay que añadir que la empresa esta abriendo otros ambitos del mercado del desarrollo web y gestionamiento de usuarios,y esto se vio reflejado en que abrió una sucursal en nuestra querida capital llamada Santiago (de Chile). Así que no quedo otra que desarrollar el sitio, entonces junto a mi amigo y colega, el diseñador de la empresa, le pusimos “cocio” al tema, y empezamos a elaborar propuestas, hasta que finalmente llegamos a algo bastante interesante, que obviamente todavía no esta para la vista de todos, pero tal vez muy pronto.

La cosa es que, hoy dentro de los requerimientos del gerente (jefecito), esta un pequeño menú desplegable (drop down), y cuando se viene esto a nuestras cabezas, empezamos a pensar “shurra! que dificil, css, javascript, mucho código, muchas sentencias, muchas cosas que hacer y decir, sinceramente ufff! wuakatela“, pero gracias a Dios, que JQuery salio a mi encuentro, y sinceramente me estoy enamorando de él, así con en su momento fue con PHP+MYSQL, luego CSS, ahora JQuery, me esta robando el corazón.

En sí JQuery, es una framework o una pequeña y muy liviana librería de Javascript, existen otros framework como AJAX más potentes, y que obviamente podemos generar un sin fin de aplicaciones y API con esta, pero JQuery es el hermano chico de AJAX, es más pequeña, tiene funciones más limitadas, pero tal vez para algunos se les haga más fácil desarrollar en ella, y trabajar con la misma, y tal vez generar los mismos resultados, que su par más grande AJAX.

Entonces yéndonos más al código, podríamos decir que en 3 pasos o 4 pasos, tendremos funcionando nuestra menú desplegable y gestionado con nuestro clásico amigo de mil batallas Wordpress.

El efecto final que queremos lograr, es el que podemos ver en la imagen que tenemos a nuestro lado izquierdo, se ve bastante complicado, y empezamos a “caldearnos la cabeza” pero sinceramente no es tan difícil que digamos más bien, cuenta con una pequeña aplicación en Javascript, y harto manejo de CSS y Wordpress como dicen por ahí hace el resto.

El primer paso en cuestión en entrar a la carpeta de nuestro template, para poder editar el archivo header.php y localizar los TAGS de HTML head. Entonces dentro de cualquier lado pegamos el siguiente código, el cual no hay que realizarse en sí ninguna modificación, a menos que manejes JavaScript, y puedas generar tus propios estructuras rápidamente.

<?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>

Luego nuevamente en nuestro archivo header.php encontraremos, tenemos que posicionar nuestro menu, lo cual lo haremos de la siguiente forma:

<ul id="dropmenu">
<?php wp_list_pages('sort_column=menu_order&title_li='); ?>
</ul>

Y finalmente para poder enchular nuestro menú, el CSS que nos hará poder mejorar el aspecto del mundo.

#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;}

Esperando que el artículo les allá servido enormemente, para olvidarse de estos cachos de montones de códigos, realmente para mi fue bastante interesante, poder tener un nuevo recuerdo que añadir, desde hoy en adelante como lo sería JQuery.

Para ver si realmente les resulto, tendría que estar quedándoles algo parecido a esto, WordPress jQuery Multi-Level Drop-Down Menu Demo.

Artículos relacionados

• LopeEdit 5.5 (3)
• Próximos eventos del Software Libre (0)
• Menu CSS (0)
• Diferentes maneras de dar formato a tus CSS y sitio web (0)
• Youtube y Digg dejarán de ofrecer soporte a usuarios de IE6 (1)
• PHP 6, Zeev Suraski habla sobre la nueva versión (0)
• Trabajando con Galería GD + Base de datos (0)