Crear un menu SOLO con CSS3 sin Javascript! [Dropdown Menu]

Estos días he estado revisando tutoriales de la web y dado que he tenido algunas peticiones con el tema de CSS3 pues he decidido crear una categoría de Diseño Web en la que hablaremos de diferentes aspectos o códigos para crear barras de buscadores, formularios o, como en este caso, un menu únicamente usando css3.

Como no soy dado al diseño web he decidido tomar los mejores tutoriales de la red y traerlos a skamasle, como muchos sabrán lo mejor en cuanto a programación suele estar en inglés y esta no es la excepción… así que mi labor en este caso se tratarña de intentar dar el mismo enfoque a los artículos originales.

Así que, manos a la obra!

Vista previa de nuestro trabajo

Esta es una vista previa de lo que nos quedará al final del tutorial:

Para mi gusto está bastante bien, la vista previa la hice con firefox 4.

Estructura HTML

La parte más simple de todas es nuestra estructura en HTML, simplemente se conformará en listas desordenadas (ul)

		<ul id="menu">
			<li><a href="#">Home</a></li>
			<li>
				<a href="#">Categorias</a>
				<ul>
					<li><a href="#">PHP</a></li>
					<li><a href="#">ASP</a></li>
					<li><a href="#">Javascript</a></li>
					<li>
						<a href="#">Diseño web</a>
						<ul>
							<li><a href="#">CSS</a></li>
							<li><a href="#">CSS3</a></li>
						</ul>
					</li>
					
				</ul>
			</li>
			<li><a href="#">Trabajos</a></li>
			<li><a href="#">Sobre Skamasle</a></li>
			<li><a href="#">Contacto</a></li>
		</ul>

Como se puede apreciar, cada ul dentro de un ul es el subapartado del anterior.

La magia del CSS

Aquí es donde se aplican todos los estilos y la magia del css3 que nos permite hacer esta clase de menus.


body
{
	width: 960px;
	margin: 40px auto;
}

/* Main menu */

#menu
{
	width: 100%;
	margin: 0;
	padding: 10px 0 0 0;
	list-style: none;  
	background: #111;
	background: -moz-linear-gradient(#444, #111); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));	
	background: -webkit-linear-gradient(#444, #111);	
	background: -o-linear-gradient(#444, #111);
	background: -ms-linear-gradient(#444, #111);
	background: linear-gradient(#444, #111);
	-moz-border-radius: 50px;
	border-radius: 50px;
	-moz-box-shadow: 0 2px 1px #9c9c9c;
	-webkit-box-shadow: 0 2px 1px #9c9c9c;
	box-shadow: 0 2px 1px #9c9c9c;
}

#menu li
{
	float: left;
	padding: 0 0 10px 0;
	position: relative;
}

#menu a 
{
	float: left;
	height: 25px;
	padding: 0 25px;
	color: #999;
	text-transform: uppercase;
	font: bold 12px/25px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}

#menu li:hover > a
{
	color: #fafafa;
}

*html #menu li a:hover /* IE6 */
{
	color: #fafafa;
}

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

/* Sub-menu */

#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);	
    background: -ms-linear-gradient(#444, #111);	
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);	
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul ul
{
  top: 0;
  left: 150px;
}

#menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}

#menu ul a
{    
    padding: 10px;
	height: 10px;
	width: 130px;
	height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
	text-transform: none;
}

*html #menu ul a /* IE6 */
{    
	height: 10px;
}

*:first-child+html #menu ul a /* IE7 */
{    
	height: 10px;
}

#menu ul a:hover
{
    background: #0186ba;
	background: -moz-linear-gradient(#04acec,  #0186ba);	
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background: -webkit-linear-gradient(#04acec,  #0186ba);
	background: -o-linear-gradient(#04acec,  #0186ba);
	background: -ms-linear-gradient(#04acec,  #0186ba);
	background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul ul li:first-child a:after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;	
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}

#menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec; 
}

#menu ul ul li:first-child a:hover:after
{
    border-right-color: #04acec; 
    border-bottom-color: transparent; 	
}


#menu ul li:last-child > a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after 
{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

Recomiendo leerlo con calma y saber separar la aplicación de estilos con la aplicación lógica que hace funcionar el menu.
Tambén podemos ver en el código parches para IE6 e IE7.

Como se crean los triangulos de cada entrada?

Si nos fijamos bien, podemos ver que cada entrada tiene un pequeño triangulito, estos triangulos se crean con las shapes y sin ninguna imagen.

El código encargado de estas shapes es:

#menu ul li:first-child a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec;
}

Problemas con IE6, como no…

IE6 no soporta la característica :hover sobre elementos que no son links.
A pesar de que en el título dice que no utilizaremos Javascript lo vamos a necesitar para hacer que el menu funcione en IE6 así que agregaremos JQuery solo para ie6.
Por suerte, a estas alturas, solo el 11% del planeta usa IE6, así que poco a poco iremos perdiendo estas prácticas.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
        $(function() {
          if ($.browser.msie && $.browser.version.substr(0,1)<7)
          {
                $('li').has('ul').mouseover(function(){
                        $(this).children('ul').show();
                        }).mouseout(function(){
                        $(this).children('ul').hide();
                        })
          }
        });
</script>

Hacks para IE6 e IE7

Hay un par de hacks más para IE6 e IE7 que no pasarán la validación de css

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

si no nos gusta hacerlo de esta forma, simplemente hay que crear hojas de estilo aparte y usar los condicionales de IE.

Bueno, eso vendría siendo todo lo necesario.
Intentaré seguir trayendo demos, el problema está en mi tiempo. Ahora mismo acumulo como 5 artículos para escribir…


Demo OnlineClic para ver la demo! Archivos EjemploDescargate el ejemplo!

Articulo original de read-team-design.com

Así nos han encontrado!

  • menus con css3
  • menus css 3
  • Menu con CSS3
  • menus con css 3
  • crear menu css3
  • menus css3
  • menu css3
  • crear menu con css 3
  • crear un menu con css3
  • menu ccs3
  • crear menu con css3
  • menu con css 3
  • crear menus con css 3
  • crear menus con css3
  • menus ccs3
  • menus en ccs3
  • crear menu javascript
  • menu css 3
  • menu en css 3
  • como hacer un menu con css 3

12 Responses to Crear un menu SOLO con CSS3 sin Javascript! [Dropdown Menu]

  1. Cristhian dice:

    excelente amihoo… justo lo q estaba buscandoo… espero q publiqs mas..

  2. Nax dice:

    Seguiremos buscando cosas en css3 que el tema da para mucho ;)

    gracias por el comentario!

  3. Alessandro dice:

    muy bueno… lo voy a usar para un tema para wordpress que estoy creando. A propósito, en mi blog tengo el mismo diseño que el tuyo jeje. ;-)

  4. Tufik dice:

    Este menu no funciona en IE9????

  5. luis dice:

    buen aporte, pero como puedo compartir este menu en todas mis pagina web dentro de mi sitio????????

  6. Toño dice:

    Hola buen dia, existe algun Hack para IE9? por que lo probe y no funciona, saludos.

  7. Nax dice:

    Hola toño, la verdad es que no lo se…

    Al parecer ie9 sigue siendo igual de guay que sus ancestros..

    debes agregar esto:
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#444′, endColorstr=’#111′);/*For IE7-8-9*/
    height: 1%;/*For IE7*/

    debajo de background en #menu.

    aún así te quedará azulado… hay que buscar que rgb utilizar ya que IE toma los colores como quiere ¬¬

    Al parecer skamasle me movió el blog de servidor así que en cuanto tenga los datos de acceso subo el nuevo file y actualizo el post ;)

  8. Clahumoon dice:

    Te vas a ir al cielo mil gracias!!!!

  9. ..mmmm…. todo esto que escribes? No es plagio?¿?
    http://www.red-team-design.com/css-ribbons
    http://www.red-team-design.com/css3-dropdown-menu

    Simplemente, creo que deberias al menos escribir la fuente de la cual proviene.

  10. Hola Valentin, veo que no se te da tan bien leer como criticar.
    Pues al final del artículo pone claramente:
    “Articulo original de read-team-design.com”

    Y en este mismo pone:
    “Como no soy dado al diseño web he decidido tomar los mejores tutoriales de la red y traerlos a skamasle, como muchos sabrán lo mejor en cuanto a programación suele estar en inglés y esta no es la excepción… así que mi labor en este caso se tratarña de intentar dar el mismo enfoque a los artículos originales.”

    Lo que he hecho ha sido traducirlos ya que hay una enorme comunidad hispana que no lee artículos en inglés los cuales se pierden grandes aportes como estos.

    Obviamente al traducirlos no hago una traducción literal sino a mi manera, que por los resultados parece que se entiende mejor.

    Desgraciadamente no tengo tiempo en estas fechas para seguir traduciendo artículos ya que la cantidad de cosas interesantes que salen en pocos días es impresionante.

  11. jose dice:

    Exclente aporte

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">