Cómo Crear un Menú Desplegable CSS

El menú de navegación es un elemento imprescindible ya que ayuda al usuario a acceder a otras partes públicas de tu página web. Hoy en día existen muchísimos tipos y estilos de menús, pero hoy te enseñaremos a crear uno de los menus más populares en la web: un menú desplegable muy básico para que lo puedas editar y personalizar a tu gusto sin complicaciones.

El menú desplegable es un tipo de menú que te permite añadir varios enlaces dentro de un enlace. Se utiliza en casos como por ejemplo, para agrupar las categorias de un blog. Estoy segura de que navegando por la web, te has encontrado más de una página que utiliza un menú desplegable.

Menu desplegable

Para este tutorial, he utilizado CodePen como editor de código pero puedes utilizar el que te vaya mejor. Nosotros te recomendamos W3Schools y SublimeText. Si eres un principiante en este tema, puedes echar un vistazo a W3Schools o Librosweb para guiarte.

Este es el resultado del menú desplegable que vamos a crear hoy con HTML y CSS en tan sólo 5 sencillos pasos.

See the Pen Simple Dropdown Menu by Samantha Black (@samanthablackes) on CodePen.

HTML

Vamos a crear nuestra estructura básica para el menú desplegable con una simple lista en HTML.

1. Crear las etiquetas <nav></nav>

Primero de todo, empezaremos por crear las etiquetas de navegación <nav></nav> y le añadiremos un nombre para identificar nuestro menú. Gracias a este id, podremos personalizarlo con CSS más adelante.

<nav id="menu">
</nav>

1.2. Añadir una lista dentro del menú

Para crear el menú principal con enlaces utilizaremos una lista y las etiquetas <ul></ul><li></li>.

<nav id="menu">
<ul>
 <li><a href="#">Enlace 1</a></li>
 <li><a href="#">Enlace 2</a></li>
 <li><a href="#">Enlace 3</a></li>
 <li><a href="#">Enlace 4</a></li>
 <li><a href="#">Enlace 5</a></li>
</ul>
</nav>

1.3. Crear el submenú

En este ejemplo, crearemos un submenú con 3 enlaces adicionales dentro del enlace 2. Para ello, seguiremos los mismos pasos que hemos seguido en el paso 2 para crear una lista.

<!-- start nav -->
<nav id="menu">
<!-- start menu -->
<ul>
 <li><a href="#">Enlace 1</a></li>
 <li><a href="#">Enlace 2</a>
<!-- start menu desplegable -->
 <ul>
 <li><a href="#">Enlace 2.1</a></li>
 <li><a href="#">Enlace 2.2</a></li>
 <li><a href="#">Enlace 2.3</a></li>
 </ul>
<!-- end menu desplegable -->
 </li>
 <li><a href="#">Enlace 3</a></li>
 <li><a href="#">Enlace 4</a></li>
 <li><a href="#">Enlace 5</a></li>
</ul>
<!-- end menu -->
</nav>
<!-- end nav -->

CSS

Ahora crearemos unos estilos CSS para darle un toque de personalización. En esta guía de CSS encontrarás más propiedades para personalizar tu menú.

EN EL BLOG -  Dar Sangre en Corel

2. Menú principal

Vamos a empezar por modificar la estructura de esta simple lista para convertirla en menú. Estos son los cambios que haremos con CSS:

  • Modificar la estructura básica
  • Dar estilo al menú principal

Como puedes ver, en este ejemplo, le hemos dado un toque nuestro, siguiendo el estilo de Desfaziendo.

/* menu */

#menu ul {
 list-style:none;
 margin:0;
 padding:0;
}

/* items del menu */

#menu ul li {
 background-color:#2e518b;
}

/* enlaces del menu */

#menu ul a {
 display:block;
 color:#fff;
 text-decoration:none;
 font-weight:400;
 font-size:15px;
 padding:10px;
 font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 text-transform:uppercase;
 letter-spacing:1px;
}

/* items del menu */

#menu ul li {
 position:relative;
 float:left;
 margin:0;
 padding:0;
}

/* efecto al pasar el ratón por los items del menu */

#menu ul li:hover {
 background:#5b78a7;
}

2.2 Menú desplegable

Para crear este tipo de menú, aplicaremos la regla CSS display que hará que los enlaces dentro del desplegable sólo se muestren al pasar el ratón. En esta sección conseguiremos lo siguiente:

  • Dar estilo al menú desplegable
  • Mostrar y ocultar los enlaces

Si te fijas, por defecto “escondemos” los enlaces del submenú con display: none y luego los mostramos aplicando display: block con el selector :hover

Además, para que nuestros enlaces aparezcan de forma vertical y no horizontal como en el menú principal, aplicaremos la regla CSS de float: none

/* menu desplegable */

#menu ul ul {
 display:none;
 position:absolute;
 top:100%;
 left:0;
 background:#eee;
 padding:0;
}

/* items del menu desplegable */

#menu ul ul li {
 float:none;
 width:150px
}

/* enlaces de los items del menu desplegable */

#menu ul ul a {
 line-height:120%;
 padding:10px 15px;
}

/* items del menu desplegable al pasar el ratón */

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

¿Qué te ha parecido este tutorial? Espero que te haya servido de algo. Si tienes alguna duda o simplemente quieres compartir tu menú desplegable con nosotros, deja un comentario en este post.

Summary
Cómo Crear un Menú Desplegable CSS
Article Name
Cómo Crear un Menú Desplegable CSS
Description
En este tutorial web, te enseñamos a crear un menu desplegable básico para tu página web con HTML y CSS en tan sólo 5 pasos.
Author
Desfaziendo Entuertos