¿Quieres añadir un menú desplegable elegante y funcional a tu página web? Con HTML y CSS, puedes hacerlo fácilmente sin necesidad de JavaScript. En esta guía completa, te mostraremos paso a paso cómo crear un menú desplegable desde cero, incluyendo:
- Estructura básica del menú con HTML: Aprenderás a usar las etiquetas
nav,ulylipara crear la estructura del menú. - Estilos con CSS: Personaliza la apariencia del menú con propiedades como
display,position,visibilityyhover. - Submenús: Crea submenús anidados para organizar tu contenido de forma eficiente.
- Ejemplos prácticos: Explora diferentes tipos de menús desplegables con ejemplos de código y demostraciones en vivo.
- Recursos adicionales: Encuentra enlaces a tutoriales, artículos y herramientas útiles para profundizar en el tema.
El menú desplegable 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 menús más populares en la web: un menú desplegable en css y html muy básico para que lo puedas editar y personalizar a tu gusto sin complicaciones.
Menú desplegable en Css y Html
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 categorías 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.
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.
Menú desplegable 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 -->
Menú desplegable 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ú.
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.
/* 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ú
- 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ú con nosotros, deja un comentario en este post.
Además te puede interesar este otro artículo sobre como crear un Botón html.
Qué es Css y Html
CSS (Cascading Style Sheets) y HTML (HyperText Markup Language) son dos lenguajes fundamentales utilizados en el desarrollo de sitios web.
HTML es el lenguaje de marcado estándar utilizado para crear la estructura y el contenido de una página web. Proporciona una serie de etiquetas predefinidas que se utilizan para definir elementos como encabezados, párrafos, imágenes, enlaces, listas y muchos otros.
Estas etiquetas permiten definir la semántica y la organización del contenido en una página web.
CSS, por otro lado, es un lenguaje de estilo utilizado para controlar el aspecto visual y la presentación de una página web.
Permite aplicar estilos y dar formato a los elementos HTML, como cambiar los colores, las fuentes, los márgenes, el tamaño y la disposición de los elementos en la página. Con CSS, puedes crear diseños atractivos y consistentes en todas las páginas de un sitio web.
La separación de HTML y CSS es una práctica común en el desarrollo web, conocida como «separación de la estructura del contenido de la presentación». HTML se utiliza para definir la estructura y el contenido de la página, mientras que CSS se utiliza para controlar el diseño y el estilo visual.
Esto proporciona una mayor flexibilidad y facilidad de mantenimiento, ya que los cambios en el estilo se pueden aplicar mediante la modificación de las reglas CSS sin afectar la estructura del contenido.
