Interesante ¿no?; este menú no utiliza imágenes ni javascript. Únicamente está compuesto por una lista de definición “dl” con listas desordenadas “ul” anidadas, CSS2 y CSS3 para aplicar el diseño.

Ustedes se preguntarán, ¿Se puede ver bien en todos los navegadores?, la respuesta es si; el objetivo es que este menú se vea correctamente en todos los navegadores; evidentemente existen versiones de navegadores en los cuales no se pueden ver detalles realizados con CSS3, pero lo importante es que el menú siga siendo funcional y usable. También habrán navegadores en los cuales no luzca con las esquinas redondeadas, pero en estos las esquinas aparecerán rectas sin alterar nada de su funcionalidad.

Por tanto, el famoso cross browsing deja de ser un problema cuando se contempla que para los navegadores más viejos, se mantenga la funcionalidad y no se desvirtúe la estética.

Hoy día, CSS3 nos permite diseñar prácticamente todo con estilos, de hecho este menú, ni siquiera fue bocetado antes, sino que el resultado decanta de experimentar con etiquetas HTML y propiedades de CSS.

En los comentarios del código pueden leer que hacen las diferentes propiedades y como se aplican.

Importante:
En IE6 los ítems ya aparecen desplegados, dado que esa versión solo soporta pseudo-clases en la etiqueta “a”.
En algunas versiones de IE, puede que no se vean las esquinas redondeadas, los efectos de sombra o degradados.

Ver HTML de ejemplo

¡Hasta pronto!

CSS

/* Este tag nos permite cargar una fuente externa para luego aplicarla como estilo */
@font-face {
  font-family: 'AlteHaasGroteskRegular';
  src: url(AlteHaasGroteskRegular.ttf);
}

body { 
	margin: 20px 0 0 0; font-family: 'AlteHaasGroteskRegular', Arial, sans-serif; font-size: 1.6em;
}

/* Hacemos que los links (etiqueta a) se comporten como bloque para aumentar su zona cliqueable  */
dl a { 
	display: block;
	text-decoration: none; 
	color: #646464;
	padding: 10px 0 10px 25px;
}

/* Elimino margenes predeterminados y aplico una sombra blanca para todos los textos, estoy aplica el filete iluminado de los textos del menú */
dl, dt, dd, ul, li { 
	padding: 0; 
	margin: 0; 
	text-shadow: rgba(255, 255, 255, 1) 1px 1px 0px;
}

/* Defino el ancho del menú, su borde, la sombra y las esquinas redondeadas */
dl { 
	width: 400px; 
	-moz-box-shadow: rgba(50, 50, 50, 0.1) 6px 6px 0px;
	-webkit-box-shadow: rgba(50, 50, 50, 0.1) 6px 6px 0px; 
	box-shadow: rgba(50, 50, 50, 0.1) 6px 6px 0px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	margin: 0 auto;
	border: 5px solid #b9b9b9;
}

/* Este es el título de la lista, tiene aplicado un fondo degradado. también debo hacer que sus esquinas superiores sean redondeadas */
dt { 
	background: #999; 
	color: white;
	padding: 10px 0;
	text-align: center;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#343434', endColorstr='#999');
	background: -webkit-gradient(linear, left top, left bottom, from(#343434), to(#999));
	background: -moz-linear-gradient(top,  #343434,  #999);
	border-top-right-radius: 16px;
	border-top-left-radius: 16px;
	-webkit-border-top-left-radius: 16px;
	-webkit-border-top-right-radius: 16px;
	text-shadow: rgba(0, 0, 0, 1) 1px 1px 2px;
}

dd {
	background: #e1e1e1;
}

/* Aplicando la pseudo clase hover a todos los dd (ítems) le digo que muestre los subítems cada vez que paso por encima de los ítems con el ratón */
dd:hover li { 
	display: block; 
}

/* Aplico color de fondo a todos los ítems (dd) impares */
dd:nth-child(even){
	background: #e1e1e1;
}

/* Aplico otro color de fondo a todos los ítems (dd) pares (esto genera el cebrado) */
dd:nth-child(odd){
  	background: #f4f4f4;
}

/* Hago que el último ítem(dd) tenga sus esquinas inferiores redondeadas */
dd:last-child { 
	border-bottom-right-radius: 17px;
	border-bottom-left-radius: 17px;
	-webkit-border-bottom-left-radius: 18px;
	-webkit-border-bottom-right-radius: 18px;
}

/* Hago que el último subítem (li) también tenga sus esquinas inferiores redondeadas */
dd:last-child li:last-child {
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	-webkit-border-bottom-right-radius: 15px;
	border: none;
}

/* Mientras el menú este contraído, oculto todos los subítems */
li { 
	display: none;
	font-size: 0.6em;
	text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 0px;
	border-bottom: 1px solid #e1e1e1;
}

/* A todos los nodos hijos (no sus nietos) a le aplico un padding izquierdo. Con esto hago que los subítems queden un poco desfasados con respecto a los ítems */
li > a { 
	padding-left: 45px;
}

/* Este es el aspecto que tomaran los subítems (li) cada vez que pase con el ratón por encima de ellos */
li a:hover { 
	background: #C6C6C6;
	color: white;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#787878', endColorstr='#a6a6a6');
	background: -webkit-gradient(linear, left top, left bottom, from(#787878), to(#a6a6a6));
	background: -moz-linear-gradient(top,  #787878,  #a6a6a6);
	text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 1px;
}

/* Este es el aspecto que tomará el último subítem (li) cada vez que pase con el ratón por encima de el */
dd:last-child li:last-child a:hover{
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	-webkit-border-bottom-right-radius: 15px;
}

/* Color de fondo para todos los subítems (li) impares */
li:nth-child(even){
  	background: #f8f8f8;
}

/* Color de fondo para todos los subítems (li) pares */
li:nth-child(odd){
	background: white;
}

HTML


Tutoriales
Javascript
Flash
Fotografía
CSS

Categoría: Tutoriales, Web

Publicado por: negro

Entradas más populares

2 Respuestas para “Menú desplegable CSS3”

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>