lunes, 26 de diciembre de 2011

Crear menú horizontal desplegable simple HTML5 y CSS

Hola. Estaba tratando de hacer un menú con CSS de manera simple, tras mucho buscar e intentar pude hacer algo funcional y que cumplia lo que necesitaba: pasar el mouse sobre una opción para que aparescan otras subopciones bajo esta.

El resultado fue el siguiente:

El menú horizontal funcionando.

Asi que manos a la obra. Lo primero es hacer una lista desordenada con html, las cuales tendran las opciones de los menus y submenus.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8" />
  <meta name="author" content="Fiko" />
  <title>Probando menu horizontal CSS</title>
  <link href="menu.css" type="text/css" rel="stylesheet" />
 </head>
 <body>
  <nav>
   <ul id="menu">
    <li><a href="">Opción 1</a>
        <ul>
         <li><a href="">Opción A</a></li>
         <li><a href="">Opción B</a></li>
         <li class="ultimo"><a href="">Opción C</a></li>
        </ul>
    </li>
    <li><a href="">Opción 2</a>
        <ul>
         <li class="ultimo"><a href="">Opción D</a></li>
        </ul>
    </li>
    <li><a href="">Opción 3</a></li>
    <li><a href="">Opción 4</a></li>
   </ul>
  </nav>
 </body>
</html>

Con este código, nos queda algo asi:

El menú sin estilos CSS.

Lo que nos queda es una lista con viñetas, y dentro de un item de la lista hay otra sublista. Lo que falta es configurarlo para que sólo las opciones de la lista principal sean visibles y se vean alineados horizontalmente. También que al pasar el cursor sobre una opción principal, aparescan las secundarias. Esto se hace con código CSS:


/* El color de fondo es solo para hacer más visible el menu */
body{
 background-color:black;
}


/* La etiqueta nav está disponible desde html5 y permite identificar
   las partes de un menu principal. Les doy una medida de ancho y margin:0 auto;
   para que aparesca centrada la lista con el menu 
*/
nav{
 width:1000px;
 height:60px;
 background-color:blue;
 margin:0 auto;
}

/* Es el ul principal, configurado para que no muestre viñetas y con las configuraciones para
   alinear al centro */
#menu{
 list-style:none;
 list-style-position:inside;
 width:800px;
 margin:0 auto;
 display:block;
 text-align:center;
}

/* Es cada opción principal del menu, los ordena horizontalmente con la propiedad float.
   Al tener un ancho fijo, se alinea su contenido al centro y con position:relative; permite
   que al pasar el cursor, aparescan las opciones bajo cada opción principal
*/
#menu li{
 float:left;
 padding:20px;
 width:150px;
 position:relative;
}

/* Es el submenu. Con display none permanece escondido y con position absolute le dice que aparesca
   bajo la opción padre. Con top y right se dice a que altura de la opción debe aparecer.
   Finalmente, con z-index:1; le dice que sobreponga a cualquier otro elemento el submenu.
*/
#menu li ul{
 list-style:none;
 list-style-position:inside;
 display:none;
 position:absolute;
 top:60px;
 left:-41px;
 z-index:1;
}

/* Es la ultima opción del submenu. con border-radius se da los bordes redondeados al final */
#menu .ultimo{
 border-radius:0 0 10px 10px;
 border:1px white solid;
 border-top:none;
}

/* Son las opciones del submenu. */
#menu li ul li{
 background-color:lime;
 padding:10px;
 width:170px;
 border-bottom:1px white dashed;
 border-left:1px white solid;
 border-right:1px white solid;
}

/* Configuración al pasar el mouse ensima de una opción principal */
#menu li:hover{
 background-color:lime;
 border-left:1px white solid;
 border-right:1px white solid;
}

/* Hace visible el ul del submenu al pasar el mouse ensima de una opción principal */
#menu li:hover > ul{
 display:block;
}

/* Configuración de como se veran los enlaces */
#menu a, #menu a:visited{
 color:white;
 text-decoration:none;
 font-family:sans-serif;
 font-weight:bold;
 outline:none;
}

#menu a:hover{
 text-decoration:underline;
}

Ahora se tiene un menu simple y configurado solo con CSS y HTML5, de manera que es ligero y de facil configuración para adaptar a cualquier proyecto.

Links:

6 comentarios:

  1. Gracias Esta genial , lo uso ahora para mi web .un millon y suerte

    ResponderEliminar
  2. Hola amigo, funciona con Internet Explorer?, es que a mi no me sale bien con el IE

    Saludos!

    ResponderEliminar
    Respuestas
    1. la verdad, no lo sé, lo probe solo en firefox, me olvidé ponerlo en el post. Si pudiste hacerlo funcionar en explorer u otro explorador, sería genial que me lo digas :)

      Eliminar
  3. No funciona con IE, con firefox si jala

    ResponderEliminar
  4. T-T busqué esto por muchos lados, gracias!

    ResponderEliminar