Menú desplegable de espectro

Los componentes del menú desplegable de Spectre son un componente importante de un sitio web interactivo. Un menú desplegable es la colección de elementos de menú que permiten a los usuarios elegir un valor de la lista.

Para agregar un menú desplegable, debe agregar un elemento contenedor con la clase desplegable . Y agregue un elemento enfocable con la clase de alternancia desplegable para el botón y un componente de menú justo al lado. También debe agregar tabindex para que los botones se puedan enfocar.

Espectro Clase de menú desplegable:

menú desplegable: esta clase se utiliza para crear un componente desplegable.
activo: esta clase hará que su menú desplegable esté en modo activo.
dropdown-toggle: esta clase se usa para hacer que el menú desplegable se pueda alternar.
menu: Esta clase se usa para crear una lista de opciones que pueden tener los menús desplegables.
dropdown-right: esta clase se usa para evitar que el menú desplegable aparezca fuera de la pantalla.

Nota: El atributo tabindex se usa para hacer que los botones se puedan enfocar.

Sintaxis:

<div class="dropdown">
  <a href="#" class="dropdown-toggle" tabindex="0">
    ....
  </a>
  <ul class="menu">
    ...
  </ul>
</div>

Ejemplo: El siguiente ejemplo ilustra el menú desplegable Spectre .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>SPECTRE Dropdown menu Class</title>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>SPECTRE Dropdown menu Class</strong>
    </center>
    <br><br>
    <strong>Basic Dropdown Button:</strong>
        <div class="dropdown">
          <a href="#" class="btn btn-success dropdown-toggle">
            DSA Course <i class="icon icon-caret"></i>
          </a>          
          <ul class="menu">
            <li>Array</li>
            <li>Linked List</li>
            <li>Stacks</li>
            <li>Queues</li>
            <li>Trees</li>
            <li>Graphs</li>
          </ul>
        </div>
        <br><br>
        <strong>Dropdown Button Group:</strong>
        <div class="dropdown">
          <div class="btn-group">
            <a href="#" class="btn">
              DSA Course-1
            </a>
            <a href="#" class="btn dropdown-toggle">
              <i class="icon icon-caret"></i>
            </a>
  
            <ul class="menu">
                <li>Array</li>
                <li>Linked List</li>
                <li>Stacks</li>
                <li>Queues</li>
                <li>Trees</li>
                <li>Graphs</li>
            </ul>
          </div>
        </div>        
</body>
</html>

Producción:

Menú desplegable de Espectro

Referencia: https://picturepan2.github.io/spectre/components/menu.html

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta