Los menús son las principales herramientas para que los visitantes naveguen por un sitio web. Pure CSS presenta menús verticales y horizontales muy simples que el desarrollador puede personalizar fácilmente.
El menú de elementos seleccionados y deshabilitados de CSS puro proporciona clases predeterminadas que nos permiten resaltar un elemento de menú como deshabilitado o seleccionado. El nombre de clase «pure-menu-disabled» se agrega después de la clase «pure-menu-item» para deshabilitar un elemento y el nombre de clase «pure-menu-selected» se agrega para que el elemento parezca seleccionado.
Clases de elementos seleccionados y deshabilitados de CSS puro:
- pure-menu-disabled: esta clase se usa para deshabilitar el elemento del menú. Esta clase se usa con la clase «pure-menu-item».
- pure-menu-selected: esta clase se utiliza para hacer que el elemento del menú sea seleccionable. Esta clase se usa con la clase «pure-menu-item».
Sintaxis:
<li class="pure-menu-item pure-menu-disabled">
Inner Elements
</li>
<li class="pure-menu-item pure-menu-selected">
Inner Elements
</li>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity= "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous"> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Pure CSS Selected and Disabled Items</h3> <div class="pure-menu pure-menu-horizontal"> <ul class="pure-menu-list"> <li class="pure-menu-heading"> GeeksforGeeks </li> <li class="pure-menu-item pure-menu-selected"> <a href="#" class="pure-menu-link"> Selected </a> </li> <li class="pure-menu-item pure-menu-disabled"> <a href="#" class="pure-menu-link"> Disabled </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Normal </a> </li> </ul> </div> </center> </body> </html>
Producción:
Elementos seleccionados y deshabilitados de CSS puro
Referencia: https://purecss.io/menus/#selected-and-disabled-items