Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño artículo que podría considerarse una pequeña actualización sobre un post que escribí hace ya un tiempo. En aquel artículo veíamos Cómo crear un menú desplegable con CSS3, y cómo lo actualicé hace poco (la verdad es que no recuerdo por qué), otro usuario (llamado Jorge), me ha pasado un código que dice haber desarrollado él, y que básicamente hace lo mismo que hacía aquel. Vamos, que crea un menú superior desplegable y animado. Aun que no es responsive para adaptarse a móviles, supongo que algo así siempre le puede venir bien a alguien que esté empezando a estudiar algo relacionado con la creación de páginas web.
Hoy en día, tener un menú en una web, es algo imprescindible para mostrar la información que queramos categorizada de forma clara, para que los usuarios que visiten el sitio puedan encontrarlo todo de forma rápida. Pero aquí cada creador tiene su propio estilo, por lo que conocer diferentes formas de crear un estilo que se adapte a nuestras necesidades del momento puede sacarnos de algún que otro problema.
Como puede ver en la anterior imagen, el código que este usuario nos ha cedido tan amablemente, crea la barra superior del menú, la cual se puede desplegar. Para hacerlo tan solo código HTMK y CSS. En este ejemplo básico, se han añadido elementos de menú, y un pequeño texto. Cuando nos movamos sobre algunos de los elementos del menú, aparecerá el submenú (si lo tiene). Esto es solo un esqueleto de ejemplo, no no proporciona al usuario ninguna otra posibilidad más que ver cómo se abre y se cierra el menú. El resto de la codificación necesaria, ya que da en manos de quién quiera desarrollar esto más (al igual que hacer responsive el menú)
Crea un menú superior desplegable utilizando HTML y CSS
Para crear este pequeño ejemplo, será necesario crear dos archivos. El primero de ellos será el archivo archivo HTML en el que vamos a crear la estructura del menú. El otro archivo es en el que vamos a escribir las reglas CSS con las que aplicaremos el estilo y el efecto del menú desplegable.
Después de crear estos archivos, simplemente hay que pegar los siguientes códigos en el archivo correspondiente.
El archivo index.html
Como decía, el primer archivo que vamos a crear se llamará index.html. En el siguiente código vamos a importar también las CSS de font-awesome para mostrar el triángulo que mostrará el submenú.
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>Barra de Menú desplegable con CSS</title>
<link rel="stylesheet" href="style.css">
<!-- Importamos el CSS de font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body>
<nav>
<!-- Esta etiqueta la utilizaremos para crear el logo (para no usar una imagen -->
<label class="logo">entreunosyceros.net</label>
<!-- Esta UL es la lista que nos servirá para crear el menú a mostrar -->
<ul>
<li><a class="active" href="#">Inicio</a></li>
<li>
<a href="#">Cosas de andar
<i class="fas fa-caret-down"></i>
</a>
<ul><!-- Submenú #1 -->
<li><a href="#">Pie</a></li>
<li><a href="#">Manos</a></li>
<li><a href="#">Calzado</a></li>
<li><a href="#">Chanclas</a></li>
<li>
<a href="#">Ofertas
<i class="fas fa-caret-right"></i>
</a>
<ul> <!-- Submenú #2 -->
<li><a href="#">Anillos</a></li>
<li><a href="#">Pulseras</a></li>
<li><a href="#">Callos</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Cepillos
<i class="fas fa-caret-down"></i>
</a>
<ul>
<li><a href="#">Para bombillas</a></li>
<li><a href="#">Para encías</a></li>
<li>
<a href="#">Cerdas
<i class="fas fa-caret-right"></i>
</a>
<ul>
<li><a href="#">Duras</a></li>
<li><a href="#">Blandas</a></li>
<li><a href="#">Cerdas/Cerdos</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</body>
</html>El archivo style.css
En segundo lugar, el archivo que vamos a utilizar para crear las reglas CSS, se llamará style.css. Dentro de este archivo solo será necesario pegar las siguientes reglas para que el menú superior desplegable.
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
body {
font-family: Comic Sans;
overflow: hidden;
}
nav {
height: 70px;
background: #0d5252;
box-shadow: 0 9px 20px rgba(0, 0, 1, .4);
}
nav .logo {
color: rgb(158, 255, 187);
font-size: 35px;
padding-left: 100px;
font-weight: bold;
line-height: 70px;
}
nav ul {
float: right;
margin-right: 190px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: rgb(218, 218, 218);
display: block;
padding: 0 15px;
line-height: 70px;
font-size: 20px;
background: #0d5252;
transition: .4s;
}
nav ul li a:hover,
nav ul li a.active {
color: #36e9e9;
}
nav ul ul {
top: 85px;
border-top: 3px solid #36e9e9;
visibility: hidden;
position: absolute;
}
nav ul li:hover>ul {
top: 70px;
opacity: 1;
visibility: visible;
transition: .4s linear;
}
nav ul ul li {
border: 1px solid #0d5252;
border-top: none;
width: 185px;
display: list-item;
position: relative;
}
nav ul ul li:hover {
border-bottom: 1px solid #36e9e9;
}
nav ul ul li a {
line-height: 65px;
}
nav ul ul ul {
border-top: none;
}
nav ul ul ul li {
position: relative;
left: 150px;
top: -50px;
}
nav ul ul li a i {
margin-left: 40px;
}
section {
height: 100vh;
}Y esto es todo lo necesario para crear un menú superior desplegable animado utilizando tan solo códigos HTML y CSS. Si quieres ver cómo funciona este ejemplo, puedes hacerlo en el siguiente enlace.
Como decía al principio de estas líneas, creo que estos códigos pueden ayudar a los principiantes a comprender las posibilidades que ofrecen las reglas CSS. El usuario que me ha enviado estos códigos (Jorge), dice que quién quiera puede utilizar estos códigos en su sitio web. Aun que sin duda habrá que aplicarle los cambios necesarios para adaptarlos a estos tiempos.