Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS ofrece menús desplegables que se pueden usar como un menú contextual ligero para encerrar operaciones y navegaciones. En este artículo, discutiremos las diferentes opciones desplegables disponibles, como la alineación, los encabezados y los divisores, junto con ejemplos.
Clases de opciones desplegables de Primer CSS utilizadas:
- dropdown-caret: esta clase se utiliza para crear un icono de flecha desplegable.
- dropdown-menu-ne: esta clase se utiliza para definir los elementos de la lista de menú en la dirección noreste.
- menú desplegable-e: esta clase se utiliza para definir los elementos de la lista de menú en la dirección este.
- dropdown-menu-se: esta clase se usa para definir los elementos de la lista de menú en la dirección sureste.
- dropdown-menu-s: esta clase se usa para definir los elementos de la lista de menú en la dirección sur.
- dropdown-menu-sw: esta clase se usa para definir los elementos de la lista de menú en la dirección suroeste.
- menú desplegable-w: esta clase se utiliza para definir los elementos de la lista de menú en la dirección oeste.
- dropdown-divider: esta clase se usa para definir el divisor en los elementos de la lista del menú desplegable.
- encabezado desplegable: esta clase se utiliza para crear un encabezado en los elementos de la lista del menú desplegable.
Sintaxis:
<details class="dropdown details-reset
details-overlay d-inline-block">
<summary class="btn">
...
<div class="dropdown-caret"></div>
</summary>
<ul class="dropdown-menu dropdown-menu-ne">
<li>
<a class="dropdown-item" href="#">...</a>
</li>
...
</ul>
</details>
Ejemplo 1: el siguiente ejemplo ilustra el uso de la alineación de opciones desplegables en Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Dropdown Options </title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Dropdown Options </h3> <div style="margin-top: 96px"> <details class="dropdown details-reset details-overlay d-inline-block mb-5"> <summary class="btn"> Select any Course <div class="dropdown-caret"></div> </summary> <ul class="dropdown-menu dropdown-menu-ne"> <li><a class="dropdown-item" href="#">DSA</a></li> <li><a class="dropdown-item" href="#">OOP's</a></li> <li><a class="dropdown-item" href="#">DBMS</a></li> </ul> </details> </div> <details class="dropdown details-reset details-overlay d-inline-block mt-2"> <summary class="btn"> Select Test Series <div class="dropdown-caret"></div> </summary> <ul class="dropdown-menu dropdown-menu-e"> <li><a class="dropdown-item" href="#"> Amazon Test Series </a></li> <li><a class="dropdown-item" href="#"> Microsoft Test Series </a></li> <li><a class="dropdown-item" href="#"> Google Test Series </a></li> </ul> </details> </center> </body> </html>
Producción:
Opciones desplegables de Primer CSS
Ejemplo 2: el siguiente ejemplo ilustra el uso de los divisores desplegables en Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Dropdown Options </title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Dropdown Options </h3> <details class="dropdown details-reset details-overlay d-inline-block mt-3"> <summary class="btn" aria-haspopup="true"> Select any Course <div class="dropdown-caret"></div> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li><a class="dropdown-item" href="#">DSA</a></li> <li><a class="dropdown-item" href="#">OOP's</a></li> <li><a class="dropdown-item" href="#">DBMS</a></li> <li class="dropdown-divider" role="separator"></li> <li><a class="dropdown-item" href="#"> Operating System </a> </li> </ul> </details> </center> </body> </html>
Producción:
Opciones desplegables de Primer CSS
Ejemplo 3: El siguiente ejemplo ilustra el uso de encabezados desplegables en Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Dropdown Options </title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Dropdown Options </h3> <details class="dropdown details-reset details-overlay d-inline-block mt-3"> <summary class="btn" aria-haspopup="true"> Select any course <div class="dropdown-caret"></div> </summary> <div class="dropdown-menu dropdown-menu-se"> <div class="dropdown-header"> GeeksforGeeks courses </div> <ul> <li><a class="dropdown-item" href="#">DSA</a></li> <li><a class="dropdown-item" href="#">OOP's</a></li> <li><a class="dropdown-item" href="#">DBMS</a></li> </ul> </div> </details> </center> </body> </html>
Producción:
Opciones desplegables de Primer CSS
Referencia: https://primer.style/css/components/dropdown#options