Menú desplegable con CSS3

Menú desplegable con CSS3

Buenas, este nuevo tutorial se trata de un menú desplegable que usa las características del CSS3 y que sólo requiere de una imagen. Lo mejor de todo es que este funciona en otros navegadores como Internet Explorer , aún cuando estos no soporten las nuevas propiedades; la única diferencia es que no se verán ni sombra ni bordes redondeados.

Como siempre, el estilo hay que ponerlo antes de la etiqueta: 

</head>

 y allí pega esto, de ello podremos cambiar los detalles.

<style> /* el menú es una lista */ #nav { background: #678 url(URL_gradient.png ) repeat-x 0 -110px; line-height: 100%; margin: 0; padding: 7px 6px 0; border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4); } #nav li { /* cada item de esa lista */ float: left; list-style: none; margin: 0 5px; padding: 0 0 8px; position: relative; } /* las definiciones del Nivel Principal */ #nav a { color: #DDD; display: block; font-weight: bold; margin: 0; padding: 8px 20px; text-decoration: none; -webkit-border-radius: 1.6em; -moz-border-radius: 1.6em; text-shadow: 0 1px 1px rgba(0,0,0, .3); } #nav a:hover { background: #000; color: #FFF; } /* efecto hover en el Nivel Principal */ #nav .current a, #nav li:hover > a { background: #468 url(URL_gradient.png ) repeat-x 0 -40px; color: #444; border-top: solid 1px #F8F8F8; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); box-shadow: 0 1px 1px rgba(0,0,0, .2); text-shadow: 0 1px 0 rgba(255,255,255, 1); } /* los subniveles */ #nav ul li:hover a, #nav li:hover li a { background: none; border: none; color: #333; -webkit-box-shadow: none; -moz-box-shadow: none; } #nav ul a:hover { background: #456 url(URL_gradient.png ) repeat-x 0 -100px !important; color: #fff !important; -webkit-border-radius: 0; -moz-border-radius: 0; text-shadow: 0 1px 1px rgba(0,0,0, .1); } /* el efecto de desplegar */ #nav li:hover > ul { display: block; } /* las definiciones de los submenues */ #nav ul { background: #DDD url(URL_gradient.png ) repeat-x 0 0; border: solid 1px #B4B4B4; display: none; left: 0; margin: 0; padding: 0; position: absolute; top: 35px; width: 185px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3); } #nav ul li { float: none; margin: 0; padding: 0; } #nav ul a { font-weight: normal; text-shadow: 0 1px 0 #FFF; } /* las definiciones de los submenues internos */ #nav ul ul { left: 181px; top: -3px; } /* bordes redondeados del primer y último item */ #nav ul li:first-child > a { -webkit-border-top-left-radius: 9px; -moz-border-radius-topleft: 9px; -webkit-border-top-right-radius: 9px; -moz-border-radius-topright: 9px; } #nav ul li:last-child > a { -webkit-border-bottom-left-radius: 9px; -moz-border-radius-bottomleft: 9px; -webkit-border-bottom-right-radius: 9px; -moz-border-radius-bottomright: 9px; } /* definiciones generales */ #nav:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; } #nav { display: inline-block; } html[xmlns] #nav { display: block; } * html #nav { height: 1%; } </style>

• Inicio
• Menu 1
  • Sub Menu 1.1
    • Sub Menu 1.1.1
    • Sub Menu 1.1.2
    • Sub Menu 1.1.3
    • Sub Menu 1.1.4
  • Sub Menu 1.2
    • Sub Menu 1.2.1
  • Sub Menu 1.3
  • Sub Menu 1.4
• Menu 2
  • Sub Menu 2.1
    • Sub Menu 2.1.1
    • Sub Menu 2.1.2
    • Sub Menu 2.1.3
  • Sub Menu 2.2
  • Sub Menu 2.3
  • Sub Menu 2.4
    • Sub Menu 2.4.1
    • Sub Menu 2.4.2
    • Sub Menu 2.4.3
• Menu 3
• Menu 4

El HTML es una serie de listas animadas y allí  sólo debemos tener cuidado para que las etiquetas queden correctamente cerradas. El código del ejemplo es el siguiente:

<ul id="nav"> <li class="current"><a href="javascript:void(0);">Inicio</a></li> <li> <a href="javascript:void(0);">Menu 1</a> <ul> <li> <a href="javascript:void(0);">Sub Menu 1.1</a> <ul> <li><a href="javascript:void(0);">Sub Menu 1.1.1</a></li> <li><a href="javascript:void(0);">Sub Menu 1.1.2</a></li> <li><a href="javascript:void(0);">Sub Menu 1.1.3</a></li> <li><a href="javascript:void(0);">Sub Menu 1.1.4</a></li> </ul> </li> <li> <a href="javascript:void(0);">Sub Menu 1.2</a> <ul> <li><a href="javascript:void(0);">Sub Menu 1.2.1</a></li> </ul> </li> <li><a href="javascript:void(0);">Sub Menu 1.3</a></li> <li><a href="javascript:void(0);">Sub Menu 1.4</a></li> </ul> </li> <li> <a href="javascript:void(0);">Menu 2</a> <ul> <li> <a href="javascript:void(0);">Sub Menu 2.1</a> <ul> <li><a href="javascript:void(0);">Sub Menu 2.1.1</a></li> <li><a href="javascript:void(0);">Sub Menu 2.1.2</a></li> <li><a href="javascript:void(0);">Sub Menu 2.1.3</a></li> </ul> </li> <li><a href="javascript:void(0);">Sub Menu 2.2</a></li> <li><a href="javascript:void(0);">Sub Menu 2.3</a></li> <li> <a href="javascript:void(0);">Sub Menu 2.4</a> <ul> <li><a href="javascript:void(0);">Sub Menu 2.4.1</a></li> <li><a href="javascript:void(0);">Sub Menu 2.4.2</a></li> <li><a href="javascript:void(0);">Sub Menu 2.4.3</a></li> </ul> </li> </ul> </li> <li><a href="javascript:void(0);">Menu 3</a></li> <li><a href="javascript:void(0);">Menu 4</a></li> </ul>

1.  Y Listo → Si te gusto, dale me gusta a el sitio. 
2. Si tienes dudas, comenta todas serán respondidas.

¡Compártelo!

Tweet