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 el código antes de seguir leyendo.
Empezaremos con HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mobile Navigation Menu</title>
</head>
<body>
<section>
<!-- Create three divs to represent the three-line dropdown menu bar -->
<div id="toggle-container">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<!-- Add your navigations here -->
<div id="toggle-content" class="toggle-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</section>
</body>
CSS:
/*This section demarcation is solely for the purpose of the tutorial*/
section{
width: 800px;
height: 600px;
margin-top: 50px;
margin-left: 250px;
border: solid black 1px;
background: #e6e3dc;
}
/*position the divs container in your DOM*/
#toggle-container{
display: grid;
width: fit-content;
margin-left: 720px;
margin-top: 10px;
}
/*Stack the three divs above each other. Then set a height and width for them.*/
#one, #two, #three{
background: black;
width: 30px;
height: 3px;
margin-top: 5px;
}
.toggle-content{
display: none;
margin-left: 700px;
margin-top: 20px;
}
.toggle-content a{
display: block;
text-decoration: none;
color: black;
font-size: 30px;
}
.toggle-content a:hover{
color: blue;
}
/*Display the class instance created by JavaScript in block*/
.displayed{
display: block;
}
Agregar JavaScript:
var toggler = document.getElementById("toggle-container");
var toggleContents = document.getElementById("toggle-content");
document.addEventListener("click", function(){
//Apply a class intance to each navigation and set display to toggle:
toggleContents.classList.toggle("displayed");
});
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.
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:
//Add a click event to your webpage:
window.onclick = function(event) {
//Target the click event on the menu bar to allow the webpage body to track it:
if (!event.target.matches('#toggle-container')) {
var dropdowns = document.getElementsByClassName("toggle-content");
//Hide the navigations by looping through each of them:
for (var i = 0; i < dropdowns.length; i++) {
var dropped = dropdowns[i];
if (dropped.classList.contains('display')) {
dropped.classList.remove('display');
}
}
}
}
Así que aquí hay un resumen de lo que acaba de hacer: creó tres líneas usando la etiqueta div de HTML. Ajustó su altura y ancho y los colocó en su DOM. Luego les diste un evento de clic usando JavaScript.
Establece la visualización inicial de sus navegaciones en ninguna para ocultarlas cuando se carga la página. Luego, el evento de clic en las tres líneas alterna estas navegaciones según una clase instanciada de JavaScript ( mostrada ). Finalmente, usó esta nueva clase para mostrar las navegaciones usando CSS y el método toggleContents de 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.