P. 1
Como hacer un menú desplegable multinivel usando solo CSS

Como hacer un menú desplegable multinivel usando solo CSS

|Views: 640|Likes:
Publicado porAnderson Lagos

More info:

Published by: Anderson Lagos on May 26, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOCX, PDF, TXT or read online from Scribd
See more
See less

02/08/2014

pdf

text

original

Como hacer un menú desplegable multinivel usando solo CSS

En este tutorial aprenderemos a hacer un sencillo menú desplegable con soporte para infinitos niveles usando HTML y CSS.

Estructura HTML
Trabajaremos con una lista con clase de “nav”, que almacenara los items del menú:
1 2 3
<head> <!DOCTYPE HTML> <html>

4 5

<title>Menu desplegable usando solo CSS</title> <link rel="stylesheet" href="estilos.css" />

6 </head> 7 <body> 8 <ul class="nav"> 9 10 11 12
</ul> <li><a href="">Home</a></li> <li><a href="">Servicios</a></li> <li><a href="">Acerca</a></li> <li><a href="">Contacto</a></li>

13 14 15

</body> </html>

Los submenús se desplegaran cuando el usuario pase el cursor, estos iran como listas dentro de listas(ul > li > ul). Este ejemplo funcionara con cualquier cantidad de submenús, eso quiere decir que puedes incluir los niveles de menús que quieras, en este caso tendremos 3 niveles:
8 <ul class="nav"> 9
<li><a href="">Home</a></li>

10 11 12 13 14 <li><a href="">Servicios</a> <ul> <li><a href="">Diseno grafico</a></li> <li><a href="">Diseno web</a> <ul> <li><a href="">Submenu 1</a></li> 15 16 17 18 19 20 21 22 23 <li><a href="">Submenu 2</a></li> <li><a href="">Submenu 3</a></li> <li><a href="">Submenu 4</a></li> <li><a href="">Submenu 5</a></li> </ul> </li> <li><a href="">Marketing</a> <ul> <li><a href="">Submenu 1</a></li> <li><a href="">Submenu 2</a></li> 24 25 26 27 28 29 30 31 32 33 <li><a href="">Submenu 3</a> <ul> <li><a href="">Submenu 1</a></li> <li><a href="">Submenu 2</a></li> <li><a href="">Submenu 3</a></li> <li><a href="">Submenu 4</a></li> </ul> </li> </ul> </li> <li><a href="">SEO</a></li> 34 35 36 </ul> </li> <li><a href="">Acerca</a> .

6 } 7 8 . } 10 11 .37 38 39 40 41 <ul> <li><a href="">Historia</a></li> <li><a href="">Mision</a></li> <li><a href="">Vision</a></li> </ul> </li> 42 43 44 45 46 47 <li><a href="">Contacto</a></li> </ul> Código CSS Empezaremos con un reset basico y algo de decoración para el menu: * { 1 font-family:sans-serif. . 4 margin:0.nav > li { 9 float:left. 2 3 list-style:none. 5 padding:0.nav li a { 12 background:#0c9ba0. 13 color:#FFF. text-decoration:none.

28min-width:140px. 20 21 22 23 } En la linea 9. se especifica que solo los li que sean descendientes directos del primer ul tengan float: left.nav li ul { 26display:none. } 19 background:#0fbfc6. esto es para que solo el menu principal sea horizontal y los submenús se mantengan en vertical: Por defecto todos los submenús no serán visibles. 25. 16 17 18 .nav li a:hover { padding:10px 12px. 27position:absolute.14display:block. los ocultaremos usando display: none. 15border:1px solid. 29} .

El problema ahora es que los submenús de segundo nivel en adelante se están mostrando pero no como deberían: . Proseguimos con la parte que hara que se muestre el submenu oculto: 31. 33} En este código le estamos indicando que cuando el cursor pase sobre cualquier li su descendiente ul se muestre(display: block).nav li:hover > ul { 32display:block.Todos los submenús tendrán un ancho minimo de 140px para que no se vean desiguales y llevaran position: absolute para que no afecten el ancho del menu principal.

sin embargo es una buena alternativa para cuando necesitamos crear un menu desplegable lo mas rapido posible. .nav li ul li { 36position:relative. cabe notar que este ejemplo tiene ciertas limitaciones como la de mostrar un indicador en los menús que tienen submenús. y ademas tendra top: 0 esto es para que se posicione al mismo nivel que su ancestro li que tiene position: relative. 37} 38 39. } 42 Los submenús de segundo nivel tendran right: -140px. Recuerda que puedes ver el resultado final en este enlace y/o descargar el código fuente desde aquí. para empujarlos hacia la derecha. 41top:0.nav li ul li ul { 40right:-140px. es importante notar que este valor es el mismo que el que definimos anteriormente como ancho mínimo.Lo que tenemos que hacer es que estos se muestren a la derecha de su respectivo ancestro li: 35 . Esto afectara todos los submenús de segundo nivel en adelante: Conclusión Este ejemplo esta probado en todos los navegadores incluyendo Internet Explorer(IE7+).

You're Reading a Free Preview

Descarga
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->