«
»

  • CSS menú

    Desarrollo Web
    24th Marzo 2009 - By jdcastro

    A la hora de crear menús son muy diversos los caminos que pueden tomarse, puede crearse desde una tabla con enlaces hasta complejas animaciones en flash, sin embargo yo soy partidario del uso de listas para la creación de menús, esto porque son predecibles y fáciles de controlar.

    A continuación un ejemplo muy simple para la creación de un menú desplegable basado en listas y css


    Puedes ver el ejemplo en acción aquí: menú css
    Código html:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>Menu de ejemplo</title>
      <style>
       @import url(menu.css);
      </style>
    </head>
    <body>
      <div id="nav">
      <ul>
       <li><a href="#">menu nivel 1</li>
       <li><a href="#">menu nivel 1</a>
        <ul>
         <li><a href="#">menu nivel 2</a></li>
         <li><a href="#">menu nivel 2</a></li>
         <li><a href="#">menu nivel 2</a></li>
         <li><a href="#">menu nivel 2</a>
          <ul>
           <li><a href="#">menu nivel 3</a></li>
           <li><a href="#">menu nivel 3</a></li>
           <li><a href="#">menu nivel 3</a>
            <ul>
             <li><a href="#">menu nivel 4</a></li>
             <li><a href="#">menu nivel 4</a></li>
             <li><a href="#">menu nivel 4</a></li>
            </ul>
           </li>
          </ul>
         </li>
         <li><a href="#">menu nivel 2 </a></li>
        </ul>
       </li>
       <li><a href="#">menu nivel 1</a>
        <ul>
         <li><a href="#">menu nivel 2 </a></li>
         <li><a href="#">menu nivel 2 </a></li>
         <li><a href="#">menu nivel 2 </a></li>
         <li><a href="#">menu nivel 2 </a></li>
         <li><a href="#">menu nivel 2 </a></li>
        </ul>
        </a></li>
       <li><a href="#">menu nivel 1</a></li>
       <li><a href="#">menu nivel 1</a></li>
       <li><a href="#">menu nivel 1</a></li>
      </ul>
      </div>
    </body>
    </html>
    El CSS:

    #nav * {
    margin:0;
    padding:0;
    }
    /* nivel 0*/
    #nav ul {
    list-style: none;
    float:left;
    position:relative;
    display:block;
    }
    #nav ul li {
    float:left;
    display:inline;
    border:1px solid #424242;
    padding:3px 6px;
    }
    #nav ul li ul {
    position:absolute;
    left:-9999px;
    }
    #nav ul li:hover ul {
    left:auto;
    float:left;
    width:177px;
    margin-top:4px;
    margin-left:-7px;
    }
    #nav ul li ul li {
    display: list-item;
    float:left;
    width:165px;
    margin-top:-1px;
    }
    #nav ul li:hover ul li ul {
    position:absolute;
    left:-9999px;
    }
    #nav ul li:hover ul li:hover ul, #nav ul li:hover ul li:hover ul li:hover ul {
    left:178px;
    margin:-1.4em 0 0 0;
    }
    #nav ul li:hover ul li:hover ul ul {
    position:absolute;
    left:-9999px;
    }
    /* retoques - estetica */
    #nav ul li {
    background:#565656;
    }
    #nav ul li a {
    color:#dddddd;
    font-size:0.9em;
    font-weight:bold;
    display:block;
    text-decoration:none;
    }

    la idea con este menú es sentar las bases para realizar menús controlados a través de css y utilizando listas, más adelante ire dandole mejor forma a este ejemplo para aplicarlo a menús desplegables en wordpress y Joomla.

  • 2 comentarios to “CSS menú”

    • Pagina Web COLOMBIA on Julio 14, 2009

      Excelente blog y muy buen post, te felicito.

      Un saludo.

    • jdcastro COLOMBIA on Julio 14, 2009

      Gracias Mr Pagina Web :)
      Ando corto de tiempo, pero seguro que si te pasas en unos días encuentras algunos buenos artículos.

    Leave a Reply