Menú jCool jQuery + CSS, sin imágenes.

Descripción del menú

Este menú de la izquierda está diseñado en Javascript y CSS, puedes acceder al código fuente y explicaciones.

Componentes: Este proyecto no hace uso de ninguna imagen.

Compatibilidad:
  • Internet Explorer (he probado 7, 8 y 9)
  • Google Chrome
  • Mozilla Firefox
  • Safari

Código HTML

  • Declarar el Doctype como Strict 1.0 para solucionar problemas con Internet Explorer: 

    1
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  • Incluir en el head las librerías Javascript y la hoja de estilos, adecúa las rutas a tu estructura: 
    1
2
3
    <script type="text/javascript" src="./js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="./js/jquery.color.js"></script>
<link rel="stylesheet" type="text/css" href="./css/estilos.css" media="screen" />
  • El menú:
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
    <div id='menu'>
	<ul>
		<li OnClick="mostrardes(1);">
			Título del botón 1
			<p>Descripción del botón 1</p>
		</li>
		<li OnClick="mostrardes(2);">
			Título del boton 2
			<p>Descripción del botón 2</p>
		</li>
		...
		<li OnClick="mostrardes(n);">
			<p>Descripción del boton N</p>
		</li>
	</ul>
</div>
  • Las páginas: Las diferentes secciones van encuadradas en divs con un id específico al que hacen referencia los botones, basta con declararlas así: 
    1
2
3
4
5
6
7
8
    <div id='opcion1d'>
	<h1>Tñitulo de la página 1</h1>
	Contenido de la pagina 2
</div>
<div id='opcion2d'>
	<h1>Tñitulo de la página 2</h1>
	Contenido de la pagina 2
</div>
    El número contenido en el id del div hace referencia a la función mostrardes() de los botones, para la relación boton-pagina.

    • Código Javascript

  • Efectos de los botones del menú al pasar el ratón por encima y al salir (OnMouseOver y OnMouseOut): 
    $("#menu li").hover(function() 
{	$(this).stop().animate(
	{ 	height: "70px",
		backgroundColor: "#3C6E65",
		borderTopColor:"#5c8e85",
		borderLeftColor:"#5c8e85",
		borderBottomColor:"#1c4e45",
		borderRightColor:"#1c4e45",
		color:"#fff"
	}, 200);	
}, function() {
	$(this).stop().animate(
	{ 	height: "25px",
		backgroundColor: "#eee",
		borderTopColor:"#f0f0f0",
		borderLeftColor:"#f0f0f0",
		borderBottomColor:"#ccc",
		borderRightColor:"#ccc",
		color:"#3C6E65"
	}, 700);
});
  • Al pular sobre un botón:
    Aplica una animación al botón pulsado, quita el estilo pulsado de otro boton pulsado anteriormente (si lo hay), le agrega la clase pulsado al boton pulsado, elimina posible flecha existente, crea una nueva flecha y la anima. 
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    $("#menu li").click(function() { 		
	$(".pulsado").stop().animate(
		{ 	height: "25px",
			backgroundColor: "#eee",
			color:"#3C6E65"
		}, 500);		
	$("#menu li").removeClass("pulsado");
	$(this).addClass("pulsado"); 
	$(".flecha").remove();
	$(this).append("<div class='flecha'></div>");		
	$(".flecha").animate( {right:"10px",opacity:".2",display:"block"},700 );
});
  • Función mostrardes(id); oculta todas las secciones y muestra únicamente la pasada como id: 
    1
2
3
4
5
    function mostrardes(id) {
	$('#descripciones').children("div").hide();
	var cadena = '#opcion' + id + 'd';	
	$(cadena).fadeIn(500);	
}

    • Hojas de estilo (CSS)

  • Estilos básicos para que funcione el menu: 
    #menu {
	width:280px; 		
	display:inline-block;
	float:left;	
}
#menu ul { 
	margin:0px;
	padding:0px; 
}
#menu li { 
	list-style-type:none;
	color:#3C6E65;
	line-height:20px;
	display:inline-block;
	width:240px; 	 	
	font-family:"Verdana";
	height:25px;
	overflow:hidden;	
	position:relative;
	border-bottom: 2px solid #ccc;
	border-right:2px solid #ccc;
	border-left:2px solid #f0f0f0;
	border-top:2px solid #f0f0f0; 
	padding: 7px 10px 6px;
	font-size:22px;
	margin-bottom:5px;
	z-index:1;
	background-color:#eee;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	border-radius: 5px;
	behavior: url(border-radius.htc);	 
	-moz-box-shadow: 2px 2px 10px #ccc;
	-webkit-box-shadow: 2px 2px 10px #ccc;
	box-shadow: 2px 2px 10px #ccc;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#cccccc')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#cccccc');	
}
#menu li p { 
	font-family:"Verdana";
	font-weight:normal;
	font-size:14px; 
	line-height:16px;
}
#menu li:hover {
	cursor:pointer; 	
	border-bottom: 2px solid #1c4e45;
	border-right:2px solid #1c4e45;
	border-left:2px solid #6c9e95;
	border-top:2px solid #6c9e95; 

}
#menu li:active { 	
	padding-top:9px;
	height:68px !important;
	background-color:#1c4e45!important;	
	color:#ddd !important;	
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color='#777777')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color='#777777');
}
#descripciones { 
	display:inline-block;		
	width:520px;
	float:right;
}
#descripciones > div { 
	display:none;
	padding:5px; 
	font-family:"Verdana";
	font-size:14px;
	margin:0px;
	margin-right:5px;
	margin-top:10px; 
}
#descripciones > div > li { margin-top:10px; }
.flecha {
	width: 0;
	height: 0;
	border-top: 35px solid transparent;
	border-bottom: 35px solid transparent;
	border-left: 20px solid #fff;
	float:right;
	position:absolute; 
	right:50px; 
	top:5px;
	opacity:0;
	z-index:10;	
}
h1 { font-family:"Verdana";
	font-size:26px; 
	line-height:30px;
	color:#3c7e75;
	font-weight:bold;	
	border-bottom:2px #3c7e75 solid;
	padding:5px; 
	margin:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	border-radius: 5px;
}
.pulsado { 	
	height:70px !important;
	color:white !important;
	background-color:#2C5E55 !important; 
	background-position:center right !important; 
	background-repeat:no-repeat!important; 
	border-bottom: 2px solid #6c9e95!important;
	border-right:2px solid #6c9e95!important;
	border-left:2px solid #000!important;
	border-top:2px solid #000!important; 	
}

    • Descarga el proyeto

    Puedes descargar el proyecto en formato zip.

    La siguiente descarga corresponde a todo el proyecto Web, no solo el menú, toda la pagina que ves ahora, incluidas explicaciones, cabecera, pie y estilos aplicados a otros elementos que no son el menú:

    Licencia de uso

    jCool Javascript Menú por Enrique Espejo Cabrera se encuentra bajo una Licencia Creative Commons Atribución-CompartirIgual 3.0 Unported.
    Basada en una obra en www.espejocabrera.com.
  • http://creativecommons.org/licenses/by-sa/3.0/

    • Otros Proyectos

    Actualizaciones / Bugs

  • Actualizaciones:

    • Versión 1.1:
      • Estableciendo un min-height en CSS al #menu conseguimos que no se tenga que redimensionar el #contenedor con el movimiento de los botones al hacer hover, se gana mucho rendimiento de renderización.
      • Ahora el cambio de color de los bordes de los botones en el evento hover y else hover son controlados por javascript en la animación haciendo más suave el cambio de color y permitiendo quitar los cambios de color de borde en CSS.
      • Añadida sección publicitaria para rentabilizar un poco el proyecto :), solo tres enlaces en formato texto en el pie de página, nada intrusivo.

  • Problemas conocidos:

    • No es posible enlazar a una sección en concreto ya que el cambio de sección es en javascript, se trabaja todo el contenido en la misma pagina, intercalando capas.
    • No siempre funciona el OnClick de los LIs en el menú, debe tener algo que ver con los bordes de los elementos contenidos en él.

    • Enrique Espejo 2011©