Crear menu desplegable con CSS

17 Oct

Hoy vamos a ver como crear un menú desplegable sin nada mas que nuestro HTML y CSS. Realmente la técnica no es complicada, simplemente se basa en una lista que hace de menú y listas anidadas para los submenus.

Podeis ver una demo del resultado final

Aquí no voy a publicar todo el código por que sería demasiado largo así que descargadlo y nos metemos en harina.

HTML

La parte HTML es muy sencilla, solo hay que atender a la lógica. Lo que hemos hecho es construir un menú mediante una lista sin orden (<ul>) y anidar otra lista en los elementos que van a ser desplegables. Vamos a ver un extracto:

<ul id="menu">
    <li><a href="#">Boton 1</a>
        <ul>
            <li><a href="#">Submenu Boton 1</a></li>
            <li><a href="#">Submenu Boton 2</a></li>
            <li><a href="#">Submenu Boton 3</a></li>
        </ul>
    </li>
</ul>

CSS

Para los que no hayáis construido nunca un menú horizontal, se basa en eliminar las bullets de la lista y hacer que los elementos (<li>) floten hacia la izquierda.

ul{
	list-style:none;
	}
ul#menu li{
	float:left;
	}

En nuestro caso, como tenemos listas anidadas, vamos a asignarles una posición absoluta ajustada a la izquierda y vamos a ocultarlas. Tambien debemos asignarle una posición relativa a los <li> del menú principal para que hagan de referencia para el menú anidado.

ul#menu li{
	float:left;
	position:relative;
	}
ul#menu ul{
	position:absolute;
	left:0;
	display:none;
	}

Ahora llegamos al nucleo del asunto, a la técnica que crea los menús desplegables.

Se basa en que cuando ponemos el ratón encima de un <li> de la lista principal, la propiedad display de la lista anidada cambia a block. Para ello hacemos uso del pseudo selector :hover

ul#menu li:hover ul{
	display:block;
}

¡Está vivo!

Ahí tenemos lo básico para tener el menú funcionando perfectamente, pero como ya avisé al principio, no quería poner aquí todas las CSS ni el HTML completo para no extenderme demasiado.

En el resultado final, yo he optado por darle color a todos los botones e incluso añadir una imagen de una flecha en los menús desplegables para dar una indicación de que hay mas información, así que descargaos el código y toquetearlo.

Espero que haya sido de utilidad.

Link: Descargar código | Demo

&lt;div class=&quot;menuContainer&quot;&gt;<br />
<br />
&lt;ul id=&quot;menu&quot;&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Progamaci&oacute;n &lt;img src=&quot;arrow.png&quot; width=&quot;12&quot; height=&quot;12&quot; alt=&quot;desplegable&quot; /&gt;&lt;/a&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;PHP&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;ASP&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;JavaScript&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/li&gt;<br />
<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;SEO&lt;/a&gt;&lt;/li&gt;<br />
<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dise&ntilde;o &lt;img src=&quot;arrow.png&quot; width=&quot;12&quot; height=&quot;12&quot; alt=&quot;desplegable&quot; /&gt;&lt;/a&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Interfaz&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Plantillas&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Publicidad&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contacto&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;<br />
&lt;/div&gt;<br />

17 comentarios to “Crear menu desplegable con CSS”

  1. CINTYA 10 febrero 2010 a 01:04 #

    HOLA ME GUSTA TU PÀGINA YO SOY DE PERU Y ME ENCANTA APRENDER ESTAS COSAS PERO ME COMPLICO UN POCO CON ESTO DE CSS DE VERDAD SI ME RECOMIENDAS ALGUN INSITUTO DONDE ENSEÑEN ESTO SERIA BACAN
    ARIGATO

    • ozzysong 10 febrero 2010 a 09:38 #

      Pues lo cierto es que no conozco ningún instituto profesional que se dedique a enseñar desarrollo web ya que soy bastante autodidacta.
      Lo único que puedo recomendarte es W3Schools, donde puedes aprender HTML, CSS y Javascript desde cero con ejemplos, aunque en ingles.
      De todas formas, yo soy de España y no conozco nada al otro lado del charco.

      Muchas gracias por los apoyos y si tienes alguna duda no dudes en preguntar :)

  2. Ishkar 15 febrero 2010 a 16:00 #

    Muy interesante!!

    Pero hay que tener en cuenta que este ejemplo es muy probable que de problemas en IE6 (que es un lastre, pero a nivel “profesional” aún hay que tenerlo en cuenta por su cuota de usuarios) ya que la propiedad :hover en IE6 da problemas excepto en las etiquetas “a” (a:hover).

    Un saludo y continua así!!

    • ozzysong 15 febrero 2010 a 16:07 #

      Es cierto que puede generar incompatibilidades en IE6, pero yo personalmente y profesionalmente llevo sin dar soporte a Explorer 6 mas de medio año.

      Tambien es cierto que aunque la gente usa Explorer 6, cada vez lo usan menos y hay que hacer entender de una vez que un navegador con 9 años de antigüedad no vale para nada, incluso Microsoft ha reconocido que es un agujero negro de bugs y fallos de seguridad.

      Gracias por el comentario :D

  3. Bryan 27 abril 2010 a 16:54 #

    Demasiado bueno está muchisimas gracias!!

    • ozzysong 27 abril 2010 a 16:56 #

      Se agradece el comentario :)

  4. tK0CNnpt53K 4 agosto 2010 a 14:42 #

    I want to post quick hello and want to say appriciate for this good article. N3QX2y7yxha8rK

  5. Turbito 26 enero 2011 a 20:49 #

    gracias, el código es genial y el menú muy bonito, me será de mucha ayuda! :DD

  6. gaBeweb 31 enero 2011 a 00:53 #

    Perfecto este tutorial, además de supersencillo. Lo he aplicado en mi tumblelog (http://gabeweb.tumblr.com) y va de maravillas.

    Agregando tus blogs a mis favoritos.

    Saludos desde Venezuela :)

    • ozzysong 31 enero 2011 a 00:55 #

      ¡Muy bueno!

      Me alegro de que le saques provecho :)

  7. Diego Alfaro 19 agosto 2012 a 18:58 #

    Soy web master de http://www.tusitiowebgratis.com.ar y probe este menu y lo recomiendo es genial y muy simple de adactar a cualquier caso

  8. Nait 8 septiembre 2012 a 22:54 #

    Hola, a mi no me funciona, alguien que me ayude por favor, gracias

  9. tONiii 20 septiembre 2012 a 13:57 #

    Hola,

    Me ha encantado tu tutorial ya que me estoy iniciando en este mundo pero tengo una duda.

    Tengo el menú desplegable montado en un iframe pero debajo tengo otro iframe para las noticias y cuando paso el ratón por el menú desplegable no me termina de cargar todo su contenido y se corta por tener el iframe justo abajo.

    He estado mirando y por lo visto con “overflow= visible” debería funcionar pero no se que pongo realmente mal.. me estoy volviendo loco jajaja

    Gracias de antemano.

    Un saludo,
    tONiii.

  10. HERSON 23 octubre 2012 a 01:33 #

    yo estoy preparando una pagina web como trabajo y pues la estoy haciendo sobre cosas q pinto y vendo ……la verdad es que t doy mil gracias por compartir el tutorial ya q buscada exactamente estoo para añadirlo y no sabia como….pretendia hacerlo con flash pero me han comentado q es un poco mas dificil……nuevamente t doy las gracias ya que es muy facil de aplicarlo y sencillo …..un saludo !

Trackbacks/Pingbacks

  1. Trackback - 17 octubre 2009

    Comentario…

    [..]Articulo Indexado Correctamente[..]…

  2. Crear menú desplegable solo con CSS - 15 febrero 2010

    […] Crear menú desplegable solo con CSS innominepixel.wordpress.com/2009/10/17/crear-menu-desplegabl…  por ozzysong hace 2 segundos […]

  3. feegk » Crear menu desplegable con CSS - 24 julio 2010

    […] La parte HTML es muy sencilla, solo hay que atender a la lógica. Lo que hemos hecho es construir un menú mediante una lista sin orden (<ul>) y anidar otra lista en los elementos que van a ser desplegables. Vamos a ver un extracto: ver fuente […]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: