Sidebar Menu en jQuery
En esta ocasión vamos a entregarles un menú desplegable realizado en jQuery para mejorar la navegación de las web que creamos.
Para esto hemos realizado un plugin en jQuery que recibe como parámetro el elemento que queremos que trabaje como menú.
El único requisito para que el plugin trabaje es adjuntar a nuestra web la librería de jQuery actual, para esto agregamos la siguiente línea de código html en nuestra sección <head>.
<script src="http://code.jquery.com/jquery-latest.js"></script>
Luego procedemos a adjuntar el archivo de plugin de nuestro menú
<script src="vectorMenu/vectorMenu.js"></script>
Ahora vamos a darle forma a nuestro menú, para eso necesitamos crear varios elementos:
- Un botón (o varios) que nos permita abrir y cerrar el menú.
- Un contenedor para el menú.
- Los ítems del menú.
Vamos a mostrar como hacerlo con un ejemplo para que sea más fácil:
<button class="btnMenu" style="z-index: 999;"><i class="fa fa-bars"></i></button> <div class="menu"> <div class="item" data-url="index.html"> Inicio <div style="float: right;"><i class="fa fa-home fa-lg"></i></div> </div> <div class="item" data-js="alert('hola');">Experiencias</div> <div class="item" data-url="index.html?salir=1">Salir</div> </div> <input type="button" value="Esta Abierto?" onclick="window.alert($('.menu').vectorMenu.isOpen());" />
Como se puede ver hemos creado un botón que tiene como contenido las barras de menú (utilizando Font Awesome), en elemento div con clase menu con varios elementos div de clase item.
Luego al final creamos otro botón opcional que al hacer clic en él nos abre una ventana de alerta indicándonos si el menú se encuentra abierto o no.
Una vez creados los elementos básicos procederemos a inicializar el menú con código jQuery de la siguiente forma:
<script type="text/javascript"> $(document).ready(function() { $(".menu").vectorMenu({ trigger: ".btnMenu", duration: 300, effect: "push", startVisible: false, opacity: 0.8, background: "#000", closeWidth: "0" }); }); </script>
Como se puede observar al llamar a la función vectorMenu le pasamos un array de parámetros con valores definidos, ahora veremos todos los parámetros de configuración y sus valores por defecto.
Nombre | Tipo de dato | Valor por defecto | Descripción |
---|---|---|---|
width | Texto | «250px» | Ancho del menú al abrirse. |
widthMobile | Texto | «200px» | Ancho del menú al abrirse en un dispositivo móvil. |
trigger | Texto | «#btnMenu» | Selector del elemento que actúa como disparador (Abrir o Cerrar el menú). |
easing | Texto | «linear» | Efecto de easing que se ejecuta al abrir y cerrar el menú (Aquí pueden ver todos los tipos de easing). |
effect | Texto | «slide» | Comportamiento del menú al abrirse, puede tomar 2 valores: slide hace que el menú se abra por encima de la página o push que al abrirse empuja la página hacia la derecha. |
duration | Entero | 600 | Duración en milisegundos de la apertura o cierre del menú. |
startVisible | Booleano | false | Indica al plugin si el menú arranca desplegado al cargar la página. |
startVisibleMobile | Booleano | false | Indica al plugin si el menú arranca desplegado al cargar la página en dispositivos móviles. |
opacity | Real | 0.6 | Transparencia del fondo del menú. |
background | Texto | «#000» | Estilo de fondo del menú. |
closeWidth | Texto | «0» | Ancho del menú cuando se encuentra cerrado (Esto puede ser útil si preferimos mostrar unos botones de acceso pequeños). |
closeWidthMobile | Texto | «0» | Ancho del menú cuando se encuentra cerrado en dispositivos móviles. |
itemPadding | Texto | «10px 5px» | Padding de cada ítem. |
itemColor | Texto | «#FFF» | Color de cada ítem. |
itemColorHover | Texto | «#000» | Color de cada ítem cuando tiene el puntero del mouse encima de él. |
itemBackground | Texto | «» | Fondo de cada ítem. |
itemBackgroundHover | Texto | «rgba(255, 255, 255, 0.8)» | Fondo de cada ítem cuando tiene el puntero del mouse encima de él. |
zindex | Entero | 1 | Valor zIndex del menú. |
setStyleItem | Booleano | true | Indica al plugin si él se encarga de dar estilo a los ítems o lo realiza a mano el desarrollador. |
htmlBackgroundColor | Texto | «#FFF» | Color de fondo de toda la página (esto es útil cuando se utiliza el efecto push en el menú). |
Aquí dejamos el ejemplo completo para que puedan descargar
Los comentarios estan desactivados.