jQuery Vertical Mega Menu
En este artículo vamos a ver como añadir a nuestra Web un mega menú vertical que no será más que las habituales listas anidadadas del HTML combinado con el plugin jQuery Vertical Mega Menu.
Este tipo de menús permiten al usuario ver todas las opciones disponibles del menú para cada elemento del nivel padre o superior.
Los estilos se pueden editar fácilmente a través de su hoja de estilos (CSS).
Hay varias opciones de plugins disponibles para la personalización del menú de tamaño natural.
Puede elegir el efecto de animación para el menú: mostrar/ocultar, atenuar o deslizar. Jugar con la velocidad de la animación. Establecer el número de sub menús por fila a mostrar en el mega menú desplegable. Hacer que se desplegue a la derecha o a la izquierda, entre otros.
Para añadirlo a nuestra página Web tan solo tendremos que descargar el plugin.
Luego en nuestra página, en el <head> deberemos añadir los estilos necesarios, la libraría jQuery, el plugin más su llamada:
<link href="css/dcverticalmegamenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcverticalmegamenu.1.3.js'></script>
<script type="text/javascript">
$(document).ready(function($){
$('#mega-1').dcVerticalMegaMenu({
rowItems: '3',
speed: 'fast',
effect: 'show',
direction: 'right'
});
</script>
En el <body> construiremos el menú con sus submenús al gusto:
<ul id="mega-1" class="mega-menu"> ... </ul>
Autor
¿Buscas trabajo de programador?
33 artículos que te podrían interesar
Ver más sobre
Deja una respuesta