Menú – Part 42 – Barcelona Geeks

Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y está bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.

El marco de Bulma proporciona el componente de menú que se puede utilizar como un tipo de navegación vertical. Este componente es útil para aquellos sitios web que quieran agregar navegación vertical. El menú de Bulma consta de tres cosas, es decir, contenedor de menú, etiquetas de menú y lista de menú. Las clases del menú de Bulma se discuten a continuación.

Clases de Menú Bulma:

menu: esta clase se utiliza como contenedor para el componente de menú.
menu-label: Esta clase se usa para agregar una etiqueta para las listas en el componente de menú.
menu-list: esta clase se utiliza para agregar una lista de elementos dentro del componente de menú.

Sintaxis:

<aside class="menu">
  <p class="menu-label">Home</p>
  <ul class="menu-list">
    <li><a>Practice</a></li>
    <li><a>Tutorial</a></li>
    ...
  </ul>
  ...
</aside>

Ejemplo: El siguiente ejemplo ilustra el componente del menú de Bulma.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" 
          href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
</head>
  
<body>
    <div class="container content">
        <h1 class="title has-text-success">
            GeeksforGeeks
        </h1>
        <h2 class="subtitle">Bulma Menu</h2>
        <aside class="menu">
            <p class="menu-label">Home</p>
  
            <ul class="menu-list">
                <li><a>About us</a></li>
                <li><a>Careers</a></li>
            </ul>
            <p class="menu-label">Tutorial</p>
  
            <ul class="menu-list">
                <li><a>Interview Prep</a></li>
                <li>
                    <a class="is-active 
                              has-background-primary">
                      Programming Languages
                    </a>
                    <ul>
                        <li><a>Go Lang</a></li>
                        <li><a>C#</a></li>
                        <li><a>Python</a></li>
                    </ul>
                </li>
                <li><a>Data Structures</a></li>
                <li><a>Web Tech</a></li>
                <li><a>Machine Learning</a></li>
            </ul>
            <p class="menu-label">Courses</p>
  
            <ul class="menu-list">
                <li><a>Java</a></li>
                <li><a>Python</a></li>
                <li><a>C++</a></li>
            </ul>
        </aside>
    </div>
</body>
  
</html>

Producción:

Menú

Referencia: https://bulma.io/documentation/components/menu

Publicación traducida automáticamente

Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta