Bulma es un marco CSS basado en flexbox que se utiliza para desarrollar sitios web hermosos y receptivos. Viene con componentes prediseñados que facilitan a los desarrolladores el desarrollo de sitios web, ya que no tienen que diseñar todo desde cero. En este artículo, veremos cómo usar Navbar Burger en Bulma.
La hamburguesa Navbar es un menú de hamburguesas que se muestra solo en dispositivos táctiles. Es un contenedor que contiene tres etiquetas de intervalo HTML que se utilizan para mostrar las líneas del menú de hamburguesas o el signo de la cruz cuando el menú está activo. El modificador is-active se puede usar en el contenedor navbar-burger para convertirlo en una cruz.
Clases de hamburguesas Bulma Navbar:
- navbar-burger: esta clase se usa como el último elemento secundario del contenedor navbar-brand para mostrar el botón de menú de hamburguesas en los dispositivos táctiles.
Sintaxis:
<a role="button" class="navbar-burger">
<span></span>
<span></span>
<span></span>
</a>
Ejemplo: El siguiente ejemplo ilustra cómo usar las clases Burger de Bulma Navbar para hacer un botón de hamburguesa en Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Navbar Burger</title>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
p{
margin-top: 25px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b class="is-size-4">
Bulma Navbar Burger
</b>
<div class="container is-fluid">
<p><b>Navbar Burger:</b></p>
<nav class="navbar is-warning">
<div class="navbar-brand">
<a class="navbar-item"
href="https://geeksforgeeks.org">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152-200x101.png">
</a>
<a role="button"
class="navbar-burger"
aria-label="menu"
aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</nav>
<p><b>Active Navbar Burger:</b></p>
<nav class="navbar is-warning">
<div class="navbar-brand">
<a class="navbar-item"
href="https://geeksforgeeks.org">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152-200x101.png">
</a>
<a role="button"
class="navbar-burger is-active"
aria-label="menu"
aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</nav>
</div>
</body>
</html>
Producción:
Hamburguesa de Bulma Navbar
Enlace de referencia: https://bulma.io/documentation/components/navbar/#navbar-burger