Sidebar Menu en jQuery

   17 de enero de 2016    Sin comentarios aún    Publicado en: HTML, JavaScript / 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

   Etiquetas: , ,

Los comentarios estan desactivados.