Para crear un menú de navegación que se ajuste automáticamente al tamaño de la pantalla, primero debes crear un archivo HTML y CSS. A continuación te explicamos cómo hacerlo paso a paso:
1. Abre un editor de código (como Sublime Text o Visual Studio Code) y crea un nuevo archivo llamado “index.html”.
2. En el archivo HTML, escribe el siguiente código para crear la estructura básica de tu sitio web:
<!DOCTYPE html>
<html>
<head>
<title>Mi sitio web</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</body>
</html>
3. Crea un nuevo archivo llamado “style.css” y escribe el siguiente código para estilizar el menú de navegación:
nav {
background-color: #333;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
4. Añade una media query al archivo CSS para que el menú se ajuste al tamaño de la pantalla:
@media screen and (max-width: 600px) {
li {
float: none;
}
}
5. Guarda los archivos y abre el archivo “index.html” en tu navegador para ver el resultado. Deberías ver un menú de navegación con tres enlaces y un fondo de color gris oscuro. Si cambias el tamaño de la ventana del navegador, verás cómo el menú se ajusta automáticamente al tamaño de la pantalla.
Continuemos con algunas sugerencias adicionales para mejorar tu menú de navegación.
Añade un botón de “menú” para dispositivos móviles: En lugar de mostrar todos los enlaces del menú en todo momento, puedes ocultar los enlaces y mostrarlos sólo cuando el usuario haga clic en un botón de “menú”. Para hacerlo, puedes agregar un botón de “menú” en el archivo HTML y escribir el siguiente código CSS para ocultar los enlaces en dispositivos móviles:
<button class="menu-btn">Menú</button>@media screen and (max-width: 600px) {
li {
float: none;
display: none;
}
.menu-btn {
display: block;
}
}Añade un efecto de “desplazamiento suave” al hacer clic en los enlaces: Puedes agregar un efecto de “desplazamiento suave” a los enlaces del menú para que cuando el usuario haga clic en un enlace, la página se desplace suavemente hasta la sección correspondiente en lugar de saltar de forma brusca. Para hacerlo, puedes utilizar el siguiente código JavaScript:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});Añade un efecto “desvanecimiento” al hacer clic en el botón de “menú” en dispositivos móviles: Si has agregado un botón de “menú” para dispositivos móviles, puedes agregar un efecto de “desvanecimiento” a los enlaces cuando el usuario haga clic en el botón. Para hacerlo, puedes escribir el siguiente código CSS:
@media screen and (max-width: 600px) {
li {
float: none;
display: none;
transition: 0.5s ease-in-out;
}
.menu-btn {
display: block;
}
.menu-btn:hover + li {
display: block;
}
}Espero que esto te haya ayudado a crear un menú de navegación que se ajuste automáticamente al tamaño de la pantalla. Recuerda que este es sólo un ejemplo básico y puedes personalizar el menú a tu gusto agregando más enlaces, cambiando los colores y utilizando diferentes tipos de fuentes.
0 Comments