Menú desplegables en css

Menú desplegables en css

En esta entrada vamos a aprender a crear menú desplegables en css, hablábamos en el post anterior de cómo crear menú con css y html y utilizamos las etiquetas <menú> para hacer nuestro tutorial, también en el tutorial de Menú dinámico con CSS3 y HTML5, vimos estas etiquetas. Hoy en este post vamos a crear un menú más avanzado y más dinámico. Vamos hacer un menú desplegables en css el cual le dara un aspecto mas profesional a nuestro sitio web.

Este mini-tutorial ya tiene una version mas actualizada en el siguiente link.

Menu desplegables con css ultima actualizacion

 

Mi primer menú desplegables en css

Lo primero que vamos a necesitar para este pequeño tutorial es un archivo html, y en este caso le puse el nombre de menú-desplegables-con-css.html, pero tú puedes ponerle el nombre que quieras bueno empezamos con el código html.

Lo primero que hacemos es la estructura de nuestro documento html este lo vamos a programar con HTML5.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>menú desplegables en css</title>
</head>
<body>
<div id="contenedor">
<ul id="principal">
<li><a href="/">Inicio</a></li>
<li><a href='#'>Primer menu</a>
<ul class="hijos">
<li><a href='#'>Link 1</a></li>
<li><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
<li><a href='#'>Link 5</a></li>
</ul></li>
<li><a href='#'>Segundo Menu</a>
<ul>
<li><a href='#'>Link 1</a></li>
<li><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
<li><a href='#'>Link 5</a></li>
</ul></li>
<li><a href='#'>Tercer menu</a></li>
<li><a href='#'>Cuarto menu</a></li>
</ul>
</ul>
</body>
</html>

Si te fijas en el código html para nuestro menú desplegables en css hemos utilizado esta vez listas o más bien un <ul> para crear nuestro menú, porque te digo esto bueno porque si leíste el tutorial anterior de menú con css y html entonces sabrás que lo hicimos de una manera muy distinta utilizando solo la etiquetas <menú>.

Ahora pasemos a lo mas interesante al código css que es el que le dará el estilo a nuestro menú desplegable, copio el código y después una breve descripción.

<style type="text/css">
* {
margin:0;
padding:0;
}
#principal {
background:#DEDEDE;
width:600px;
}
#principal ul {
list-style: none;
}
#contenedor{
 margin-top:10px;
 height:40px;
 width:650px;
 border:solid 1px #DEDEDE;
 border-radius:5px;
 background:-moz-linear-gradient(#F60 0%, #F90 100%);
 background:-ms-linear-gradient(#F60 0%, #F90 100%);
 background:-o-linear-gradient(#F60 0%, #F90 100%);
 background:-webkit-linear-gradient(#F60 0%, #F90 100%);
 background:linear-gradient(#F60 0%, #F90 100%);
 }
#principal li {
float:left;
list-style:none;
cursor: pointer;
display:block;
border-right:0px solid #333;
}
#principal li:hover {
background: #f25e00;
}
#principal a, #principal a:visited {
margin: 0px;
padding:10px 16px;
font-weight:bold;
color:#FFF;
display:block;
}
#principal a:hover {
text-decoration:none;
display:block;
}
#principal li {
float: left;
margin: 0px;
padding: 0px;
}
#principal li li {
float: left;
margin: 0px;
padding: 0px;
width: 122px;
text-transform:none;
}
#principal li li a, #principal li li a:link, #principal li li a:visited {
background:#F90;
width: 122px;
float: none;
margin: 0px;
padding: 5px 10px 5px 18px;
border: 0px;
}
#principal li li a:hover, #principal li li a:active {
background:-moz-linear-gradient(#F0F 0%, #F69 100%);
background:-ms-linear-gradient(#F0F 0%, #F69 100%);
background:-o-linear-gradient(#F0F 0%, #F69 100%);
background:-webkit-linear-gradient(#F0F 0%, #F69 100%);
background:linear-gradient(#F0F 0%, #F69 100%);
padding: 5px 10px 5px 18px;
color:blue;
border:solid 1px #DEDEDE;
}
#principal li ul {
position: absolute;
width: 10em;
left: -999em;
}
#principal li:hover ul {
left: auto;
display: block;
}
#principal li:hover ul, #principal li.sfhover ul {
left: auto;
}
a{text-decoration:none;
}
</style>

Lo primero que hacemos en el código css es indicarle al documento html que no tenga ni margen ni padding lo que nos ajustara todo el contenido en nuestro documento.

* {
margin:0;
padding:0;
}

Luego pasamos a nuestro id principal y les colocamos un ancho y un estilo a nuestra etiqueta ul

#principal {
background:#DEDEDE;
width:600px;
}
#principal ul {
list-style: none;
}

Ahora le aplicamos un degradado al div que contendrá nuestra lista y en si nuestro menú desplegable.

#contenedor{
margin-top:10px;
height:40px;
width:650px;
border:solid 1px #DEDEDE;
border-radius:5px;
background:-moz-linear-gradient(#F60 0%, #F90 100%);
background:-ms-linear-gradient(#F60 0%, #F90 100%);
background:-o-linear-gradient(#F60 0%, #F90 100%);
background:-webkit-linear-gradient(#F60 0%, #F90 100%);
background:linear-gradient(#F60 0%, #F90 100%);
}

Y lo demás es historia si vas probando código por código podrás ver que hace cada una de esas líneas, y así aprende mucho mejor y más rápido.

Aquí la apariencia que tiene que tener nuestro menú desplegables con css si ve que no te sale bien pruebalo copiando el codigo que blogger aveces no acepta algunas etiquetas css que escribimos.

Nota: La visualización del menú no está disponible debido a la mudanza de nuestro servidor ya que se perdieron algunos datos pero si copias el código veras que todo funciona a la perfección.

En caso que no te haya salido bien revisa el código que copiaste no valla hacer que se te paso algo por alto y por supuesto como siempre estos menú están creado para navegadores de verdad como Chrome, firefox,Opera,Safari e incluso para el engendro de Internet Explorer pero en su versión más actualizada que creo que solo funciona en Windows 8.

Bueno espero y te haya gustado el tutorial y sobre todo modificale lo que quiera y adactalo a tu gusto que asi es como se aprender.

Gracias por leer el tutorial y hasta una proxima entrada..

Comments

  1. By Anónimo

  2. By Anónimo

  3. By Anónimo

  4. By Anónimo

  5. By Anónimo

  6. By Lenca

Deja un comentario

Tu dirección de correo electrónico no será publicada.