Menú vertical desplegable con CSS y JQuery


Un menú vertical para la sidebar del blog, bastante práctico con sub pestañas integradas tipo acordeon, es algo estético con un toque minimalista.
La estructura se basa en el script, los estilos y la estructura HTML, estas 3 partes yo en lo personal las coloco en la plantilla por separados, claro está si lo usaré a posteriori, lo primero que debemos tener en cuenta es implementar JQuery en nuestra plantilla, algunas ya lo traen por defecto, pero en caso de no tenerlo ubicamos la línea del <head> y justo arriba pegamos la siguiente línea

<script src='http://code.jquery.com/jquery-latest.js'/>
Si ya lo tienen omitan dicho paso.
A continuación buscamos la línea del ]]></b:skin> y justo arriba pegamos primero los estilos.
/* MenuSidebar Escribiendo Trazos */
#elmenu,#elmenu ul,#elmenu li,#elmenu a {
margin: 0;
 padding: 0;
 border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
 line-height: 1;
font-family: 'Josefin Sans', sans-serif;
 font-size: 14px;
 position: relative;
}
#elmenu a {
 line-height: 1.3;
}
#elmenu {
 width: 250px;
background: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 3px;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
#elmenu > ul > li {
margin: 0 0 2px 0;
}
#elmenu > ul > li:last-child {
margin: 0;
}
#elmenu > ul > li > a {
 font-size: 15px;
display: block;
color: #ffffff;
text-shadow: 0 1px 1px #000;
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%); background: linear-gradient(#565656 0%, #323232 100%);
border: 1px solid #000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#elmenu > ul > li > a > span {
display: block;
border: 1px solid #666666;
padding: 6px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; font-weight: bold;
}
#elmenu > ul > li > a:hover {
text-decoration: none;
}
#elmenu > ul > li.active {
border-bottom: none;
}
#elmenu > ul > li.active > a {
background: #97be10;
background: -moz-linear-gradient(#0f88c0 0%, #0779c8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0f88c0), color-stop(100%, #0779c8));
background: -webkit-linear-gradient(#97be10 0%, #79980d 100%); background: linear-gradient(#0f88c0 0%, #0779c8 100%);
color: #fff;
text-shadow: 0 1px 1px #000; border: 1px solid #79980d;
}
#elmenu > ul > li.active > a span {
border: 1px solid #97be10;
}
#elmenu > ul > li.has-sub > a span {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfqAV772wSc63Pf4oDvA8MW-cCm8OU92KoYcjuUkA0Nwg-EE7N3592cSl1OGarKJAPlaxlMxgm9F8lJyC2RxMCO2DHkmc2XlQppuXKW9glJZMCKqEtT8JRX52aoDvTfnifcS15nHhCx33D/s1600/icon_plus.png) 98% center no-repeat;
}
#elmenu > ul > li.has-sub.active > a span {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi14-H3QNJC9aPnjw_FOjod6FGWhkhHB9q3NyZdx9QEZv-_q-ED1vDHKvSjqlG38a05m-ot5adV3PKjF0ySJoqLxEP315itjDpzBoiPD3ZNLjQV6mImI8oB2XFZGowXLQbmj5YnRT3Bz30B/s1600/icon_minus.png) 98% center no-repeat;
}
/* Sub menu */
#elmenu ul ul {
padding: 5px 12px; display: none;
}
#elmenu ul ul li {
padding: 3px 0;
}
#elmenu ul ul a {
display: block;
color: #595959;
font-size: 13px;
font-weight: bold;
}
#elmenu ul ul a:hover {
color: #79980d;
}
Luego buscamos esta línea </head> y pegamos ahora el Script que hará la función de despliegue.
<script type='text/javascript'>
//<![CDATA[
( function( $ ) {
$( document ).ready(function() {
$('#elmenu > ul > li > a').click(function() {
$('#elmenu li').removeClass('active'); $(this).closest('li').addClass('active');
 var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
 $(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
 if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
 $('#elmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
 if($(this).closest('li').find('ul').children().length == 0) {
return true;
 } else {
 return false; }
});
});
} )( jQuery );
//]]> </script>

Damos guardar plantilla y por último nos vamos a diseño y agregamos un JavaScript HTML y pegamos la estructura del menú.
<div id='elmenu'>
<ul>
<li class='active'><a href='URL-Inicio'><span>Inicio</span></a></li>
<li class='has-sub'><a href='#'><span>ENLACE1</span></a>
<ul>
<li><a href='URL-SUB'><span>PESTAÑA1</span></a></li>
<li><a href='hURL-SUB'><span>PESTAÑA2</span></a></li>
<li class='last'><a href='URL-SUB'><span>PESTAÑA3</span></a></li>
</ul> </li>
<li class='has-sub'><a href='#'><span>ENLACE3</span></a>
<ul> <li>
<a href='URL-SUB'><span>PESTAÑA1</span></a></li>
<li class='last'><a href='URL-SUB'><span>PESTAÑA2</span></a></li>
</ul> </li>
<li class='last'><a href='URL-ENLACE4'><span>ENLACE4</span></a></li>
</ul>
</div>
La estructura se puede personalizar, agregando o eliminando sub pestañas, tal como se muestra en el código, el ejemplo en ejecución lo vemos en este demo.
Etiquetas: , ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)
Lapíz y Café | 2014 |