SummArg | Cursos y recursos para webmasters

27/03/2013

Menú vertical con efecto acordeón con jQuery para WordPress

Tiempo atrás vimos cómo hacer un menú vertical del tipo accordion para cualquier proyecto. Ahora queremos compartir con ustedes un método para que ese menú funcione con los menús de WordPress.

Primero generamos el menú desde el functions.php

register_nav_menu( 'menu-main' , 'Menu principal');

Ahora colocamos el código del menú con su marcado HTML en la plantilla sidebar.php o en donde lo queramos ver.

<nav id="accordion">
	<ul>
		<?php wp_nav_menu(
			array(
			'theme_location'=> 'menu-main',
				'container'		=> false,
			'items_wrap' 	=> '%3$s'
			)
		); ?>
	</ul>
</nav>

El CSS deberá especificar el ancho de todo el menú y luego separamos en dos partes todo. Por un lado definimos como deben verse las secciones de nuestro menú que al ser clickeadas despliegan los subitems. Estos separadores en WordPress los podemos definir ingresando un enlace personalizado “con almohadilla” (símbolo numeral).

menu2

Finalmente para el CSS vamos a incluir una pequeña imagen que se repite a lo ancho para generar el efecto de gradiente, que les dejamos para que ustedes mismos generen a su gusto.

#accordion {
list-style: none;
padding: 0 0 0 0;
width: 146px;
margin: 0;
}
#accordion ul li {
width: 136px;
padding: 7px 5px;
background-image:url(images/background-navbar.png);
background-position: center top;
background-repeat:repeat-x;
border: 1px solid #464646;
border-bottom:none;
background-color: #eae9e9;
}
#accordion ul li:last-child {
border-bottom: 1px solid #464646;
}
#accordion ul li a{
display: block;
font-weight: bold;
font-size:11px;
color:#464646;
cursor: pointer;
text-decoration:none;
margin:0;
}

Ahora daremos estilo al submenú que por defecto debe llevar un display:none para que sólo sea mostrado desde nuestro código jQuery. 

#accordion ul li ul{
list-style-type: none;
display: none;
margin: 10px 0 0 0;
background-color: #eae9e9;
}
#accordion ul li ul li {
font-weight: normal;
cursor: auto;
width: 136px;
padding: 5px;
margin: 0 0 0 -5px;
font-size:11px;
line-height:13px;
border:none;
border-bottom: 1px solid white;
display:block;
background-image:none;
}
#accordion ul li ul li:last-child {
border-bottom: 1px solid #eae9e9;
}
#accordion ul li ul li:hover {
background-color: #f4f4f4;
}
#accordion ul li ul li a {
text-decoration: none;
color:#464646;
}

Finalmente el código jQuery en donde primero le pedimos que haga visible el primer submenú que encuentre. Luego le indicamos la acción al recibir un click sobre un separador: busca la siguiente lista anidada, se fija si está visible y en caso de no estarlo la despliega y oculta cualquier otra.

<script type="text/javascript">
$(document).ready(function() {
	$('#accordion ul li ul:eq(0)').show();
	$("#accordion ul > li > a").click(function(e){
		if($(this).next().is('ul')) {
		$('ul.sub-menu').slideUp(300);
			if(false == $("#accordion ul li a").next().is(':visible')) {
				$(this).next().slideDown(300);
			}
			else {
				$(this).next().slideToggle(300);
			}
		e.preventDefault();
		} else {}
	});
});
</script>

 

menu

Dejar un comentario

  1. Buenos días,
    perdona, ¿donde hay que poner el último código?

    muchas gracias
    rafa

Dejar un comentario