Cómo hacer una barra de menú móvil con HTML, CSS y JavaScript

Sin lugar a dudas, puede crear un menú móvil conmutable utilizando marcos CSS como TailWind o BootStrap.

Pero, ¿cuál es el concepto detrás de esto? ¿Y cómo se puede hacer uno desde cero sin depender de estos marcos CSS?

Hacer lo anterior usted mismo le brinda un control total de personalización. Entonces, sin más preámbulos, aquí le mostramos cómo crear un menú móvil conmutable utilizando su lenguaje de programación preferido.

Cómo crear su menú móvil conmutable

Si aún no lo ha hecho, abra la carpeta de su proyecto y cree los archivos de su proyecto (HTML, CSS y JavaScript).

A continuación, verá ejemplos del código que necesita para los tres tipos. Y si aún no lo ha hecho, considere descargar estas aplicaciones para aprender código antes de seguir leyendo.

Comenzaremos con HTML:

 Cree tres divs para representar la barra de menú desplegable de tres líneas 








 Agregue sus navegaciones aquí 


Casa
Acerca de
Contacto

CSS:

/ * Esta demarcación de la sección es únicamente para el propósito del tutorial * /





instagram viewer


sección{ 
ancho: 800px;
altura: 600px;
margen superior: 50px;
margen izquierdo: 250px;
borde: negro sólido 1px;
fondo: # e6e3dc;
}
/ * coloca el contenedor divs en tu DOM * /
# toggle-container {
pantalla: cuadrícula;
ancho: contenido de ajuste;
margen izquierdo: 720px;
margen superior: 10px;
}
/ * Apila los tres divs uno encima del otro. Luego, establezca una altura y un ancho para ellos. * /
#Uno, dos, tres{
fondo: negro;
ancho: 30px;
altura: 3px;
margen superior: 5px;
} 
.toggle-content {
pantalla: ninguna;
margen izquierdo: 700px;
margen superior: 20px;
}
.toggle-content a {
bloqueo de pantalla;
decoración de texto: ninguna;
de color negro;
tamaño de fuente: 30px;
}
.toggle-content a: hover {
color azul;
}
/ * Muestra la instancia de clase creada por JavaScript en el bloque * /
.desplegado{
bloqueo de pantalla;
}

Agregar JavaScript:

var toggler = document.getElementById ("alternar-contenedor");
var toggleContents = document.getElementById ("toggle-content");
document.addEventListener ("clic", función () {
// Aplicar una clase de intance a cada navegación y configurar la pantalla para alternar:
toggleContents.classList.toggle ("mostrado");
});

Así es como se ve una salida de trabajo cuando hace clic en la barra de menú:

El menú se puede alternar, por lo que al hacer clic en la barra nuevamente, o en cualquier lugar dentro de la página, se ocultan las navegaciones.

Relacionada: Elementos del sitio web de estilo con un degradado de fondo CSS

Es posible que su navegador no admita ocultar el contenido cuando hace clic en cualquier lugar dentro de su página web. Puede intentar forzar esto mediante el uso de un destino de evento y un bucle de JavaScript. Puede hacerlo agregando el siguiente bloque de código a su JavaScript:

// Agrega un evento de clic a tu página web:
window.onclick = function (evento) {
// Apunte al evento de clic en la barra de menú para permitir que el cuerpo de la página web lo rastree:
if (! event.target.matches ('# toggle-container')) {
var dropdowns = document.getElementsByClassName ("alternar-contenido");
// Oculte las navegaciones recorriendo cada una de ellas:
para (var i = 0; i var drop = desplegables [i];
if (drop.classList.contains ('display')) {
drop.classList.remove ('pantalla');
}
}
}
}

Así que aquí hay un resumen de lo que acaba de hacer: creó tres líneas usando el div etiqueta de HTML. Ajustó su altura y ancho y los colocó en su DOM. Luego les diste un evento de clic usando JavaScript.

Relacionada: Cómo hacer un sitio web: para principiantes

Establece la visualización inicial de sus navegaciones en ninguno para ocultarlos cuando se carga la página. Entonces la hacer clic evento en las tres líneas alterna estas navegaciones basadas en una clase instanciada de JavaScript (desplegado). Finalmente, usó esta nueva clase para mostrar las navegaciones usando CSS y JavaScript toggleContents método.

Relacionada: Tendencias de diseño neumorfológico en HTML, CSS y JavaScript

El resto del CSS, sin embargo, depende de su preferencia. Pero el del fragmento CSS de ejemplo aquí debería darte una idea de cómo diseñar el tuyo.

Sea más creativo al construir su sitio web

Hacer un sitio web visualmente atractivo requiere algo de creatividad. Y es más probable que un sitio web fácil de usar convierta a su audiencia que uno sencillo.

Aunque aquí le mostramos cómo crear un menú de navegación personalizado, aún puede ir más allá y hacerlo más atractivo. Por ejemplo, puede animar la visualización de las navegaciones, darles un color de fondo y más. Y hagas lo que hagas, asegúrate de que tu sitio web utilice las mejores prácticas de diseño y diseños fáciles de usar para los usuarios.

Cómo reutilizar su hardware antiguo como un profesional

¿Tiene mucha tecnología antigua abarrotando su hogar? ¡Descubra exactamente qué hacer con él en esta guía de reciclaje tecnológico!

Leer siguiente

Sobre el Autor