Como Crear un Menú Desplegable en CSS3

preview

Tema: CSS3
Dificultad: Principiante
Tiempo estimado: 20 mins.

En este tutorial vamos a programar en CSS3 el menú de navegación que puedes encontrar en Impressionist UI de Vladimir Kudinov.

Paso 1 – Código HTML

Vamos a crear una lista desordenada (unordered list <ul>) con un elemento y un enlace para cada apartado del menú. Para crear el submenú añade otra lista desordenada dentro de la lista.

<ul class="menu">
	<li><a href="#">My dashboard</a></li>
	<li><a href="#">Likes</a></li>
	<li><a href="#">Views</a>
<ul>
	<li><a class="documents" href="#">Documents</a></li>
	<li><a class="messages" href="#">Messages</a></li>
	<li><a class="signout" href="#">Sign Out</a></li>
</ul>
</li>
	<li><a href="#">Uploads</a></li>
	<li><a href="#">Videos</a></li>
	<li><a href="#">Documents</a></li>
</ul>

step11

Paso 2 – Diseño del Menú

Empezaremos por quitar el margin, padding, border y outline de todos los elementos del menú. Añadiremos un alto y ancho fijo al menú, esquinas redondeadas y los degradados en CSS3. Para alinear los enlaces horizontalmente utilizaremos float para que se monten a la izquierda. También necesitaremos establecer la posición a relativa, lo necesitaremos para alinear los submenús.

.menu,
.menu ul,
.menu li,
.menu a {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}
.menu {
  height: 40px;
  width: 505px;
  background: #4c4e5a;
  background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.menu li {
  position: relative;
  list-style: none;
  float: left;
  display: block;
  height: 40px;
}

Ocultaremos el submenú temporalmente para facilitar la creación de los estilos para el primer nivel del menú.

.menu ul { display: none; }

step21

Paso 3 – Enlaces

Para decorar los enlaces del menú añadiremos algunas propiedades CSS básicas como font, color, padding, etc. Entonces añadiremos una sombra oscura al texto y una transición de color para crear un efecto suave cuando el elemento cambia al estado hover. Para crear el separador de los enlaces añade un borde a izquierda y derecha, después quitaremos el borde de la izquierda del primer enlace y el de la derecha en el último. Para el estado hover solo cambiaremos el color del texto.

.menu li a {
  display: block;
  padding: 0 14px;
  margin: 6px 0;
  line-height: 28px;
  text-decoration: none;

  border-left: 1px solid #393942;
  border-right: 1px solid #4f5058;

  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 13px;

  color: #f3f3f3;
  text-shadow: 1px 1px 1px rgba(0,0,0,.6);

  -webkit-transition: color .2s ease-in-out;
  -moz-transition: color .2s ease-in-out;
  -o-transition: color .2s ease-in-out;
  -ms-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover > a { color: #8fde62; }

step31

Paso 4 – SubMenú

Primero quitemos la línea de código que pusimos en el segundo paso.

.menu ul { display: none; }

Ahora daremos los estilos para el submenú. Empezaremos por posicionar el submenú a 40px desde arriba y 0px desde la izquierda del apartado del menú y añadiremos unos bordes redondeados por debajo. Estableceremos la opacidad a 0 y en estado hover a 1 para crear el efecto de fundido. Para el efecto de deslizado necesitamos establecer el alto de la lista en 0px cuando esta oculto y a 36px cuando esta en hover.

.menu ul {
position: absolute;
top: 40px;
left: 0;

opacity: 0;
background: #1f2024;

-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;

-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
height: 0;
overflow: hidden;
padding: 0;

-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}

.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}

Establece el ancho de los enlaces del submenú a 100px. En vez de poner bordes a derecha e izquierda añadiremos uno abajo en todos los enlaces menos en el último.

.menu ul li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;

border: none;
border-bottom: 1px solid #353539;
}

.menu ul li:last-child a { border: none; }

Para terminar solo necesitamos añadir un icono a cada enlace del submenú. Para hacer esto crearemos una clase para cada uno y añadiremos una imagen de fondo.

.menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }

step41

Conclusión

Ya hemos creado nuestro menú desplegable en CSS3 puro. Si tienes cualquier pregunta deja un comentario. Tampoco olvides dejar tus opiniones y compartirlo con tus amigos. Síguenos si quieres ser el primero en enterarte de los últimos tutoriales y artículos publicados.

previewbtn

Descarga el menú desplegable

Desarrollador php especializado en convertir un buen café en código. Amante de JavaScript, Laravel y WordPress. Adicto a cualquier herramienta que acelere el desarrollo web. Sígueme en Twitter @zreedee.

Boletín de noticias

0 Comentarios

No hay comentarios aún

Deja tu respuesta

*
* Longitud mínima: 20 caracteres