Hoy estuve jugando un poco con un proyecto en el cual estoy trabajando hace unos días para un amigo, y necesitaba insertar un menú “Drop Down” para mostrar las categorías del blog dentro de él.

Por lo que me puse a revisar a mis marcadores y recordé un Menú muy ligero y practico que creo ClarkLab.

Wordpress Drop Down Menu

Acto seguido me puse a examinarlo e integrarlo en Wordpress. En las siguientes líneas les resumiré como lo pueden integrar en su blog.

Pueden ver un demo Aquí

Lo primero que haremos será incluir la librería jQuery en nuestro header.php. Como ya lo dije, recomiendo “llamar” a la librería directo desde Google Code para hacer más ligero el site.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

Y acto seguido haremos el llamado al script para que el menú funcione:

		<script type="text/javascript">
		$(function() {
			$('ul.hover_block li').hover(function(){
				$(this).find('img').animate({top:'182px'},{queue:false,duration:500});
			}, function(){
				$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
			});
		});
		</script>

Luego elegiremos el lugar dentro desde nuestro Theme donde incluiremos el Menú, en mi caso lo incluí dentro a la derecha dentro de la Cabecera.

Por lo cual insertaremos estas líneas en el lugar de nuestra preferencia:

<div id="cate">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/navigate.png" width="184" height="32" class="menu_head" />
 
<ul class="menu_body">
<?php
wp_list_categories('title_li='); ?>
 
<li class="bottom"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/b_navigate.png" width="184" height="32" class="menu_head" /></li>
 
</ul>
 
</div>

Ahora solo un poquito de CSS para dale forma y estaremos listo:

#cate { font-family: 'Lucida Grande',Verdana,Arial,Sans-Serif; font-size: 1.1em; }
#cate ul li{ margin: 0px; list-style: none; }
.menu_body { display: none; width: 184px; margin: 0px; list-style: none; }
.menu_body li{background:#ECD078;border-top:2px solid #FFFFFF;}
.menu_body li.alt{background:#C02942;padding:0px!important;}
.menu_body li a{color:#542437; text-decoration:none; padding:10px; display:block;}
.menu_body li a:hover{padding:15px 10px; font-weight:bold;}
.bottom{ border: none!important; background: none!important; }

Como se habrán dado cuenta es algo muy fácil de integrar y personalizar, solo se necesita un poco de CSS y dos imágenes.

Recordar visitar ClarkLab para futuras referencias y leer un poco mas de la documentación