El botón de hamburguesa es el botón que se encuentra en la esquina superior de la interfaz de usuario de la página web. El botón de hamburguesa alterna la barra del menú de navegación en la pantalla. El ícono asociado con este widget, que consta de tres barras horizontales, también se conoce como ícono de menú colapsado.
Crearemos:
- Menú Hamburguesa usando html, CSS y JavaScript para dispositivos móviles
- Menú de hamburguesas con Bootstrap
Menú de hamburguesa usando html, CSS y JavaScript para dispositivos móviles: Escribiremos todo el HTML y CSS por nuestra cuenta y agregaremos algo de JavaScript para manejar el evento de clic. El enfoque básico es marcar la visibilidad de la barra de navegación como oculta. Cuando un usuario hace clic en el icono, JavaScript eliminará la visibilidad de oculto.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font
-awesome/4.7.0/css/font-awesome.min.css">
<title>GFG Hamburger Menu Tutorial</title>
<style>
.container {
max-width: 480px;
height: 500px;
background: #5555;
margin: auto;
border: 2px solid green;
}
.navbar {
background: white;
position: relative;
}
.links {
display: none;
}
.heading a:nth-child(2) {
color: green;
text-decoration: none;
font-size: 20px;
display: block;
padding: 7px;
margin-left: 150px;
}
.heading a i {
color: green;
padding: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
}
.heading a i:hover {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
}
.links {
background-color: rgb(190, 196, 190);
}
.links a {
color: green;
padding: 5px 16px;
text-decoration: none;
font-size: 17px;
display: block;
text-align: center;
border-bottom: 1px solid white;
}
.links a:hover {
background-color: green;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="heading">
<a href="#hamburger-icon" onclick="gfgMenu()">
<i class="fa fa-bars"></i>
</a>
<a href="#Home"> Geeks For Geeks </a>
</div>
<div class="links">
<a href="#gfg1"> Notes </a>
<a href="#gfg2"> Algorithm </a>
<a href="#gfg3"> Maths </a>
<a href="#gfg4"> Data Structure </a>
<a href="#gfg5"> Java </a>
</div>
</div>
</div>
<script>
function gfgMenu() {
const GFG = document.querySelector('.links');
if (GFG.style.display === "none") {
GFG.style.display = "block";
}
else {
GFG.style.display = "none";
}
}
</script>
</body>
</html>
Producción:
Menú de hamburguesa usando Bootstrap: en este enfoque, usaremos bootstrap para diseñar nuestra página y el trabajo de JavaScript es el mismo que en el método anterior.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<title>GFG Hamburger Menu</title>
<style>
.icon,
h5 {
color: green;
}
.links a:hover,
.icon:hover {
background-color: green;
color: white;
transition: 0.4s all linear;
}
</style>
</head>
<body>
<div class="container">
<div class="pt-2 pb-2 border-bottom">
<a class="icon pl-2 pr-2 p-1
float-right" href="#hamburger-icon"
onclick="gfgMenu()">
<i class="fa fa-bars"></i>
</a>
<a class="pt-2 pb-2 text-success
text-decoration-none font-weight
-bold" href="#Home">
Geeks For Geeks
</a>
</div>
<div class="links nav flex-column d-none">
<a class="nav-link border-bottom"
href="#gfg1"> Notes </a>
<a class="nav-link border-bottom"
href="#gfg2"> Algorithm </a>
<a class="nav-link border-bottom"
href="#gfg3"> Maths </a>
<a class="nav-link border-bottom"
href="#gfg4"> Data Structure </a>
<a class="nav-link border-bottom"
href="#gfg5"> Java </a>
</div>
<div class="container">
<h5 class="my-2">Hamburger Menu</h5>
<p>
Click on the icon present
at top left corner.
</p>
</div>
</div>
<script>
function gfgMenu() {
const GFG = document.querySelector('.links');
if (GFG.classList.contains('d-none')) {
GFG.classList.remove('d-none');
}
else {
GFG.classList.add('d-none');
}
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por hritikrommie y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA