Menu de opciones desplegable con jQuery

Un menú de opciones con enlaces que cambian el contenido al ser pulsados, aprovechando que necesitaba crear un menú de estas características, he decidido crear este manual simplificado para explicar las funciones y métodos que he usado en su desarrollo, el manual es muy sencillo, para empezar, dentro de un documento HTML 5, creamos en elemento <div> con un identificador, por ejemplo “html5_cheat_seet”, que es como ya lo tengo referenciado, puedes cambiarlo por otro si quieres, dentro creamos una lista de enlaces con el número de enlaces que queremos mostrar.

Ejemplo

<div id="html5_cheat_seet">
	<ul>
		<li><a href="#definicion">Definición</a></li>
		<li><a href="#atributos">Atributos</a></li>
		<li><a href="#valores">Valores</a></li>
	</ul>
</div>

Como puedes ver en el ejemplo anterior, los vínculos de los enlaces van precedidos por el símbolo “#”, que indica que se trata de un enlace interno y el vínculo buscará el identificador del elemento, cada elemento debe llevar un identificador que como siempre, debe de ser único en el documento. Creamos a continuación los elementos a los que hacen referencia los vínculos de los enlaces que hemos creado.

	</ul>
	<div id="definicion">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...
	</div>
	<div id="atributos">
		Aenean commodo ligula eget dolor. Aenean massa.Cum sociis ...
	</div>
	<div id="valores">
		Nulla consequat massa quis enim. Donec pede justo, fringilla ...
	</div>
</div>

Si visualizamos el resultado del documento en un navegador, se muestran los 3 enlaces y los 3 contenidos, si los contenidos, fueran muy extensos, podríamos visualizar el efecto al pulsar en los enlaces, es decir, en un documento muy extenso, los enlaces nos llevarían a la parte del documento a la que hace referencia el enlace, entendido esto, pasamos ahora a crear el script.

Lo que queremos es que solo se visualice un contenido, asi que seleccionamos los elementos asociados a los enlaces y que muestran el contenido, en este caso los elementos <div>, con el método hide() ocultamos los elementos seleccionados pero antes debemos aplicar el método not() para evitar que se oculten todos los elementos seleccionados y especificar con :first que el primer elemento no debe ser afectado por el método hide().

Comenzamos el script

$(document).ready(function(){ 
	$('#html5_cheat_seet div').not(':first').hide();
});

Ahora solo se muestra el primer elemento, pero al pulsar en los enlaces, estos no hacen nada, ¿por que?, hasta el momento lo unico que le hemos dicho a jQuery es que oculte todos los elementos <div>, excepto el primero de ellos, y eso es lo que está haciendo el script. Ahora vamos a hacer una función que muestre los elementos <div> al pulsar en los enlaces, recordando siempre que cada elemento <div> tiene un identificador asociado a cada enlace.

$('#html5_cheat_seet a').click(function(){
	$('#html5_cheat_seet div').fadeIn(0);
});

El problema es que ahora se muestran todos los contenidos al pulsar en cualquier enlace porque el metodo fadeIn() selecciona todos los elementos <div>, para evitar esto hacemos uso del metodo filter().

$('#html5_cheat_seet a').click(function(){
	$('#html5_cheat_seet div').fadeOut(0).filter(this.hash).fadeIn(0);
});

El método filter() devuelve los elementos que coinciden con determinados criterios especificados, acepta múltiples criterios, especificamos con this.hash que filtre el elemento que contiene el hash ( hash es una propiedad que se puede encontrar en los elementos que contienen un atributo href, por ejemplo el hash del primer enlace es “#definicion” y el identificador del elemento que mostrará el contenido es “definicion”), de esta forma se ocultan con fadeOut(0) todos los elementos y se filtra el elemento que contiene el hash con fadeIn() para que se muestre.

Cambiar las clases de los elementos

Para terminar el script he añadido tres lineas de código para cambiar las clases de los elementos, estas lineas están resaltadas en Azul, puedes omitirlas, no son necesarias para el funcionamiento del script, solo hacen referencia a las clases.

El script completo

$(document).ready(function(){
	$('#html5_cheat_seet div').not(':first').hide();
	$('#html5_cheat_seet ul li:first a').addClass('opcion_activa');
	$('#html5_cheat_seet a').click(function(){
		$('#html5_cheat_seet a').removeClass('opcion_activa');
		$(this).addClass('opcion_activa');
		$('#html5_cheat_seet div').fadeOut(0).filter(this.hash).fadeIn(0);
		return false;
	});
});

El CSS

La clase opcion_activa solo es valida para el script completo, si omitimos las lineas resaltadas en azul que hacen referencia a las clases, no será efectiva

#html5_cheat_seet ul{ 
	display: block; 
}
#html5_cheat_seet a { 
	float: left; 
	padding: 10px; 
	list-style: none; 
	color: #888888;
}
#html5_cheat_seet a:hover{ 
	color: #000000;
}
#html5_cheat_seet a.opcion_activa{
color: #0099CC;
}
#html5_cheat_seet div{ 
	padding: 20px; 
}

El codigo completo

<!DOCTYPE HTML>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script type="text/javascript"> 
		$(document).ready(function(){ 
			$('#html5_cheat_seet div').not(':first').hide();
			$('#html5_cheat_seet ul li:first a').addClass('opcion_activa');
			$('#html5_cheat_seet a').click(function(){
				$('#html5_cheat_seet a').removeClass('opcion_activa');
				$(this).addClass('opcion_activa');
				$('#html5_cheat_seet div').fadeOut(0).filter(this.hash).fadeIn(0);
				return false;
			});
		});
</script>
<style> 
	#html5_cheat_seet ul{ 
		display: block; 
	}
	#html5_cheat_seet li { 
		display: inline; 
		padding: 10px; 
		list-style: none; 
	}
	#html5_cheat_seet a { 
		color: #888888;
	}
	#html5_cheat_seet a:hover{ 
		color: #000000;
	}
	#html5_cheat_seet a.opcion_activa{ 
		color: #0099CC; 
	}
	#html5_cheat_seet div{ 
		padding: 20px; 
	}
</style>
</head>
<body>
	<div id="html5_cheat_seet">
		<ul>
			<li><a href="#definicion">Definición</a></li>
			<li><a href="#atributos">Atributos</a></li>
			<li><a href="#valores">Valores</a></li>
		</ul>
		<div id="definicion">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...
		</div>
		<div id="atributos">
			Aenean commodo ligula eget dolor. Aenean massa.Cum sociis ...
		</div>
		<div id="valores">
			Nulla consequat massa quis enim. Donec pede justo, fringilla ...
		</div>
	</div>
</body>
</html>

Puedes ver el código de este archivo en mi cuenta de GitHub