Scribd Logo
Upload

Welcome to Scribd!

  • Menú CSS multinivel

    Uploaded by

    A Jose L Parada
    948 views6 pages

    Original Title

    Como hacer un menú desplegable multinivel usando solo CSS

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    948 views6 pages

    Menú CSS multinivel

    Uploaded by

    A Jose L Parada

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    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 submens 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 submens, eso quiere decir que puedes incluir los niveles de mens 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>

    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>

    Cdigo CSS
    Empezaremos con un reset basico y algo de decoracin para el menu:
    * {

    1
    font-family:sans-serif;

    2 3

    list-style:none; text-decoration:none;

    4 margin:0; 5 padding:0; 6 } 7 8 .nav > li { 9


    float:left; }

    10 11

    .nav li a {

    12
    background:#0c9ba0;

    13

    color:#FFF;

    14display:block; 15border:1px solid; 16 17 18


    .nav li a:hover { padding:10px 12px; }

    19
    background:#0fbfc6;

    20 21 22 23

    En la linea 9, se especifica que solo los li que sean descendientes directos del primer ul tengan float: left, esto es para que solo el menu principal sea horizontal y los submens se mantengan en vertical:

    Por defecto todos los submens no sern visibles, los ocultaremos usando display: none. 25.nav li ul { 26display:none; 27position:absolute; 28min-width:140px; 29}

    Todos los submens tendrn un ancho minimo de 140px para que no se vean desiguales y llevaran position: absolute para que no afecten el ancho del menu principal. Proseguimos con la parte que hara que se muestre el submenu oculto: 31.nav li:hover > ul { 32display:block; 33} En este cdigo le estamos indicando que cuando el cursor pase sobre cualquier li su descendiente ul se muestre(display: block).

    El problema ahora es que los submens de segundo nivel en adelante se estn mostrando pero no como deberan:

    Lo que tenemos que hacer es que estos se muestren a la derecha de su respectivo ancestro li: 35 .nav li ul li { 36position:relative; 37} 38 39.nav li ul li ul { 40right:-140px; 41top:0; } 42 Los submens de segundo nivel tendran right: -140px, para empujarlos hacia la derecha, es importante notar que este valor es el mismo que el que definimos anteriormente como ancho mnimo, y ademas tendra top: 0 esto es para que se posicione al mismo nivel que su ancestro li que tiene position: relative. Esto afectara todos los submens de segundo nivel en adelante:

    Conclusin
    Este ejemplo esta probado en todos los navegadores incluyendo Internet Explorer(IE7+), cabe notar que este ejemplo tiene ciertas limitaciones como la de mostrar un indicador en los mens que tienen submens, sin embargo es una buena alternativa para cuando necesitamos crear un menu desplegable lo mas rapido posible. Recuerda que puedes ver el resultado final en este enlace y/o descargar el cdigo fuente desde aqu.

    You might also like