Creando un menú jQuery con efecto acordeón

Hola como están en esta publicación les voy a enseñar como hacer un menú con efecto acordeón utilizando las librerías jQuery

Les voy a dejar la demo para que puedan ver su efecto y espero les guste y lo puedan utilizar en algún proyecto.

Pues bién comencemos para la utilización de este menú acordeón voy a utilizar los siguientes archivos:

index.html

estilo.css

efecto.js

jquery.js

Commencemos creando el index.html

Recordemos que dentro de <head> y </head> debemos colocar las rutas que hacen referencia al estilo y a las librerías jQuery dejandolas de la siguiente manera

<link rel="stylesheet" type="text/css" href="ruta al estilo.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="ruta al efecto.js"></script>

Dentro del body colocamos la lista con la cual vamos a trabajar…

	<ol id="lista_acordeon">
	
    <li class="list-padre">
    <div class="list">Lista jquery 1</div>
    	<ul>
    		<li><a href="http://www.bloguero-ec.com">Bloguero-ec</a></li>
   			<li>Menu 2</li>
    		<li>Menu 3</li>
    	</ul>
    </li>
    
</ol>

Para esto le hemos colocado una <ol> con su respectiva id que mas después crearemos en el estilo para darle efecto, luego dentro creamos una <li> con su respectiva clase llamada list-padre, luego una <ul> y dentro otra <li> llegando a un punto anidado. Por el momento ese es el index donde vamos a mostrar la lista de nuestro menu acordeón con jQuery.

Procedemos a crear nuestro archivo estilo.css no tiene mucha complejidad yo le he dado el siguiente estilo :

  
/*
 * Creando un menú jQuery con efecto Acordeón :
 * Menú jQuery,
 * Copyright 2015 bloguero-ec.
 * Usese cómo mas le convenga no elimine estas líneas (http://www.bloguero-ec.com)
*/
*{padding:0;
   margin:0;}
#contenedor {
	width:800px;
	background-color:#CCC;
	margin:auto;
	padding:20px;
	height:600px;
	-webkit-box-shadow: 0px 5px 11px 0px rgba(154, 159, 161, 1);
	-moz-box-shadow: 0px 5px 11px 0px rgba(154, 159, 161, 1);
	box-shadow:0px 5px 11px 0px rgba(154, 159, 161, 1);
	}
h1 {
	font-size:18px;
	text-align:center;
	color:#990;
	}
ol#lista_acordeon{
	list-style:none;
	width:200px;
	}
ol#lista_acordeon li.list-padre{
	border:1px solid #ccc;
	background:#333;
	padding-top:5px;
	font-size:20px;
	text-indent:10px;
	color:#7A7A7A;
	cursor:pointer;
	}
li.list-padre:first-child{
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	}
li.list-padre:last-child{
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	}
	
li.list-padre ul {
	background-color:white;
	list-style:none;
	padding: 0;
	display:none;
	}
li.list-padre ul li {
	border: 1px solid #ddd;
	background-color:#fbfbfb;
	padding:5px;
	}
li.list-padre ul li a{
	color:#7A7A7A;
	text-decoration:none;
	}
li.list-padre ul li a:hover{
	text-decoration:underline;
	color:#7A7A7A;
	}

div.list{
	text-align:center;
	}

Ustedes podrán modificar el estilo a su conveniencia….
El archivo efecto.js lo he llamado así ustedes podrán llamarlo como sea siempre y cuando dentro del index coloquen el nombre a utilizar mas su respectiva ruta

  
// Creando un menú jQuery con efecto Acordeón :
// Copyright 2015 bloguero-ec.
// Usese cómo mas le convenga no elimine estas líneas (http://www.bloguero-ec.com)
// JavaScript Document
    $(document).ready(function(){
		
	$('div.list').click(function(){
	
	$(this).parent().find('ul').slideToggle(500);
	$(this).parent().nextAll().find('ul').slideUp(500);
	$(this).parent().prevAll().find('ul').slideUp(500);

	});	
	
});

Una breve explicación de que es lo que realiza el archivo efecto.js bueno como ya sabrán es la que realiza el efecto. $(‘div.list’).click(function(){ en esta línea es donde realiza el efecto al dar clic en la capa div con la clase list. $(this).parent().find(‘ul’).slideToggle(500); en esta línea realiza el despliegue de todo lo que contenga la ul de la clase list-padre .Las últimas dos líneas hacen la función de cerra el acordeón abierto y abrir el acordeón cerrado.

La librería jQuery la puedes descargar directamente desde su página web jquery.com En otro caso un número de empresas grandes proporcionan copias de jQuery alojado en los actuales CDN redes que están disponibles para uso público.

Versiones de navegadores probado en:

Mozilla Firefox

Google chrome

Internet explorer

Opera

Espero les sirva en algún proyecto suerte y hasta la próxima…

Demostración

 

Relacionado