miércoles, 25 de julio de 2012

Menú Desplegable con CSS

Menú Desplegable

Una forma fácil de hacer un menú desplegable sería utilizar Flash, pero, al momento encontrariamos varios inconvenientes: el tamaño del archivo, la compatibilidad del software utilizado para reproducirlo, la adaptabilidad al resto del diseño (sobre todo si trabaja con html desde un editor de código), entre otros.

Para crear un menú deplegable con CSS y HTML necesitará el siguiente código:

Este primer bloque resetea el padding y el margin a 0px.

* {
    padding:0px;
    margin:0px;
}

Se configura la capa principal que en este caso se llamará capamenu.
#capamenu {
    margin:auto;
    width:800px;
    font-family:arial;
}

Se configuran las etiquetas de html UL y OL para que no tengan estilo.

ul, ol {
    list-style:none;
}

Se crea y configura la capa navegar que contendra cada una de las opciones, y a su vez se configura las etiquetas li para las opciones y a para los hipervinculos.

.navegar li a {
    background-color:#069;
    color:#FFFFFF;
    text-decoration:none;
    padding: 10px 15px;
    display:block;
}

Se configura el estado sobre de los hipervinculos (cuando posicione el mouse sobre la opción el color del fondo cambiará).

.navegar li a:hover {
    background-color:#FF3300;
}

Se configuran las listas que estén inmediatamente después de la capa navegar para que tengan la propiedad de flotar a la izquierda una de la otra.

.navegar > li {
    float:left;
}

Se configuran las etiquetas ul que seguirán a las etiquetas li, esto es las primeras opciones deplegables que tendremos.

.navegar li ul {
    display:none;
    position:absolute;
    min-width:140px;
}

Para que aparezcan las opciones desplegables configuraremos el estado sobre, pero, en esta ocación se modificará el estado sobre de la etiqueta li.

.navegar li:hover > ul {
    display:block;
}

Se configura la posición de las opciones desplegables, en este caso será relativa.

.navegar li ul li {
    position:relative;
}

Por último se configura la posición exacta en la que aparecerán las opciones desplegables de tercer nivel, esto mostrará cada opción de tercer nivel al lado derecho de la opción de segundo nivel.

.navegar li ul li ul {
    right:-140px;
    top:0px;
}

La segunda parte corresponde a HTML y es esta:

Antes de comenzar es importante aclarar que se debe trabajar entre las etiquetas <body> y </body>

Iniciamos la capamenu con este código.

<div id="capamenu">

 Iniciamos la clase navegar dentro de la etiqueta ul que proporcionará las listas.

    <ul class="navegar">


  Aquí iniciamos con las opciones principales del menú

        <li><a href="#">Inicio</a></li>
        <li><a href="#">Videos</a>

  Aquí iniciamos con las opciones de segundo nivel o sea las subopciones de Videos.


            <ul>
                <li><a href="#">Video 1</a></li>
                <li><a href="#">Video 2</a></li>
                <li><a href="#">Otros Videos</a>

  Aquí iniciamos con las opciones de tercer nivel o sea las subopciones de Otros Videos


                    <ul>
                        <li><a href="#">Video 1</a></li>
                        <li><a href="#">Video 2</a></li>
                        <li><a href="#">Video 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Galeria</a></li>
        <li><a href="#">Contactos</a></li>
        <li><a href="#">Carreras</a>
            <ul>
                <li><a href="#">BASICO</a></li>
                <li><a href="#">PERITO CONTADOR</a></li>
                <li><a href="#">PERITO EN ADMINISTRACION</a></li>
            </ul>
        </li>
        <li><a href="#">Preguntas</a></li>
    </ul>
</div>

Para obtener los mejores resultados debe respetar el orden de tabulación para saber que opciones esta configurando dentro de su menú desplegable.

A continuación del dejo el código sin comentarios, primero el código CSS.

Ahora el código html:



12 comentarios:

  1. que tal, como puedo hacer para que el área de un item del menú sea activa totalmente cuando paso el puntero sobre ella, me refiero, ahora es activa sólo la parte donde está el texto.. pero cuando el texto es muy corto un submenú que tengo a la derecha desaparece cuando salgo del texto con el puntero, muchas gracias por la ayuda...

    ResponderEliminar
    Respuestas
    1. Mauricio gracias por su consulta, este menú debe funcionar incluso fuera del texto, note que la configuración es para un bloque y no para el texto en si, el indicador del mouse debería seguir activo aún al abandonar el texto por esta rarón. Le recomiendo verificar la versión de css que esta utilizando o bien la versión html con la que está programando, ya que HTML5 podría presentar algunos incovenientes con la propiedad block. Puede visitar esta dirección http://www.cristalab.com/tutoriales/menu-desplegable-con-html5-y-css3-c102964l/ espero le sea de mucha ayuda.

      Eliminar
    2. claro, el ejemplo que tienes aqui funciona perfecto, pero el código que tengo en la página que estoy haciendo no trabaja igual, he estado revisando la parte del menu pero no logro hacer que sea activa toda el bloque donde va el texto, sólo el texto... te dejo la página para ver si le puedes echar un vistazo, muchas gracias por tu colaboración www.guitarrassantamaria.com/prueba

      Eliminar
    3. Que tal Juan Carlos, mil gracias, ya pude solucionar el inconveniente que tenía, cambié toda la parte de css que controlaba las opciones del menú y ahora si funciona perfecto, muchas gracias por tu ayuda, era algún tipo de conflicto con la opción display:block en algún punto... creo :D

      Eliminar
    4. Esta bien mauricio, cheque su código e hice tambien algunas modificaciones siempre se las dejo, por las dudas.

      /***** menu *****/
      .menu-row {
      width:100%;
      background:url(../images/menu-row.gif) center top repeat-x #000;
      border-bottom:1px solid #2b2b2b;
      position:relative;
      z-index:3;
      }
      .menu {
      padding:15px 10px 36px 0px;
      }

      ul, ol {
      list-style:none;
      }

      .menu li a {
      font-size:13px;
      line-height:2em;
      color:#808080;
      text-transform:uppercase;
      padding: 0px 8px;
      display:block;
      }

      /*.menu li a:hover {
      background-color:#FF3300;
      }*/

      .menu > li {
      float:left;
      }

      .menu li ul {
      display:none;
      position:absolute;
      min-width:130px;
      }
      .menu li:hover > ul {
      display:block;
      }

      .menu li:hover > ul {
      display:block;
      background-color:#090909;
      }

      .menu li ul li {
      position:relative;
      }

      .menu li ul li ul {
      right:-140px;
      top:0px;
      }

      /*.menu li a.active, le desactive esta línea pruebelo y si no activelo nuevamente*/
      .menu li > a:hover {color:#fff;}

      Eliminar
  2. hola me gustaría saber como hacer para situar la barra más a la derecha, además me gustaría saber como cambiar el color de la barra y de las pestañas cuando las selecionamos ya que cambio los valores por el del color que quiero pero no se modifica. Muchas gracias.

    ResponderEliminar
  3. Hola Juan gracias por tu consulta y perdona la tardanza, pero he estado ocupado en otros asuntos, bien con respecto a tu consulta para mover la barra hacia la derecha cambia la configuración de la capa nav para que se ubique más a la derecha y para el cambio de color en las pestañas el código que debes cambiar es:
    .nav li a:hover {
    background-color:#FF3300;
    }
    no te olvides de colocar los seis caracteres ya que en navegadores como IE no funciona solamente con tres. Espero te sea de ayuda cualquier duda me escribes.

    ResponderEliminar
  4. Buen día. tengo el siguiente inconveniente Cada vez que doy clic sobre alguna opción de menú estas cambian a color verde y que quedan así hasta que refresco la pagina de nuevo. Que debo cambiar para que esto no ocurra.

    ResponderEliminar
  5. consulta, me gustaria hacer los menues mas chicos digamos.. que solo ocupen el alto de la palabra contenida...
    GraciaS!!

    ResponderEliminar
  6. buenas esta muy bien elmenu pero no se q pasa q no m sale al copiar el codigo que debo copiar primero y como hago para tener 9 menus desplegables con bastantes submenus?

    ResponderEliminar
  7. Buen tutorial sobre menu desplegable css. En esta pagina tambien hay un articulo sobre menu desplegable con cuadro de busqueda. Tiene demo y descarga del codigo gratis.
    http://www.cattutorial.com/css/menu-desplegable-con-cuadro-de-busqueda-en-html-y-css3/

    ResponderEliminar
    Respuestas
    1. Gracias por tu aporte Fel vi el tutorial y esta muy bueno.

      Eliminar