El menú de Spectre es un componente importante de un sitio web interactivo. Un menú es la colección de elementos que permiten a los usuarios elegir un valor de la lista.
El menú Spectre contiene el menú predeterminado y el menú desplegable. El menú desplegable de Spectre se usa para agregar un menú desplegable. Debe agregar un elemento contenedor con la clase desplegable y agregar un elemento enfocable con la clase de alternancia desplegable para el botón y un menú. Si uno quiere el menú predeterminado, entonces no hay necesidad de usar clases desplegables.
Tipos de menú de espectro:
- Menú predeterminado de Spectre: esta es la opción de menú predeterminada, en este tipo podemos usar la casilla de verificación, la radio, etc.
- Menú desplegable de espectro: esta es una opción desplegable, igual que la opción predeterminada pero en la función desplegable.
Clases de menú Spectre:
- menú: esta clase se utiliza para contener los elementos en un contenedor que es el menú.
- menu-item: esta clase se utiliza para crear elementos de menú,
Sintaxis:
<ul class="menu">
<li class="menu-item">
...
</li>
...
</ul>
Los siguientes ejemplos ilustran el menú Spectre:
Ejemplo 1: En este ejemplo, crearemos un menú simple.
HTML
<!DOCTYPE html> <html> <head> <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 Menu</strong> <br><br> <strong>Spectre Default Menu:</strong> <div class="btn-group"> <ul class="menu"> <li>Choose the Topics of DSA</li> <li class="divider"></li> <li class="menu-item">Linked List</li> <li class="menu-item">Stacks</li> <li class="menu-item">Queues</li> <li class="menu-item">Trees</li> <li class="menu-item">Graphs</li> </ul> </div> </center> </body> </html>
Producción:
Menú Espectro
Ejemplo 2: en este ejemplo, crearemos un menú desplegable que también tendrá una casilla de verificación.
HTML
<!DOCTYPE html> <html> <head> <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 Menu</strong> <br><br> <strong>Spectre Dropdown Menu:</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 <input type="checkbox"> </li> <li>Linked List <input type="checkbox"> </li> <li>Stacks <input type="checkbox"> </li> <li>Queues <input type="checkbox"> </li> <li>Trees <input type="checkbox"> </li> <li>Graphs <input type="checkbox"> </li> </ul> </div> </center> </body> </html>
Producción:
Menú 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