El Spectre Nav es un componente importante que se utiliza para crear una vista de árbol. Este tipo de componente es necesario cuando queremos diseñar contenido en una vista de árbol. Para agregar un navegador, debe agregar un elemento contenedor con la clase de navegación y luego agregar elementos secundarios con la clase de elemento de navegación . Se resaltará el elemento de navegación con la clase activa .
Clase Spectre Nav:
- nav: esta clase se utiliza para crear el componente de navegación.
- elemento de navegación: esta clase se utiliza para crear los elementos de navegación.
Sintaxis:
<ul class="nav">
<li class="nav-item">
<a href="#">...</a>
</li>
<li class="nav-item">
<a href="#">..</a>
</li>
....
</ul>
El siguiente ejemplo ilustra el Spectre Nav:
Ejemplo:
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>GeeksforGeeks</h1> <strong>SPECTRE Nav Class</strong> </center> <ul class="nav"> <li class="nav-item"> <a href="#">HTML</a> </li> <li class="nav-item"> <a href="#">CSS</a> <ul class="nav"> <li class="nav-item"> <a href="#">Bootstrap</a> </li> <li class="nav-item"> <a href="#">Tailwind</a> </li> <li class="nav-item"> <a href="#">Semantic-UI</a> </li> <li class="nav-item"> <a href="#">Pure CSS</a> </li> <li class="nav-item"> <a href="#">Bulma</a> </li> <li class="nav-item active"> <a href="#">Spectre</a> </li> </ul> </li> <li class="nav-item"> <a href="#">JavaScript</a> </li> <li class="nav-item"> <a href="#">PHP</a> </li> </ul> </body> </html>
Producción:
Espectro de navegación
Referencia: https://picturepan2.github.io/spectre/components/nav.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