Primer CSS es un marco CSS gratuito y de código abierto que se crea utilizando el sistema de diseño de GitHub para brindar soporte al amplio espectro de sitios web de GitHub. Ayuda a crear la base de los elementos de estilo básicos, como el espaciado, los componentes, la tipografía, el color, etc.
Los menús desplegables son menús ligeros que proporcionan navegación y acciones. Es útil en el caso de que los datos deban organizarse y mostrarse con un menú desplegable en el que se pueda hacer clic.
Primer CSS Clases desplegables: Usamos las siguientes clases para crear un menú desplegable básico.
- menú desplegable: esta clase se utiliza para agregar un componente desplegable al sitio web.
- dropdown-caret: esta clase se usa para agregar un ícono desplegable.
- elemento desplegable: esta clase se utiliza para crear el elemento desplegable.
- menú desplegable: esta clase se utiliza para crear un menú en el menú desplegable.
Opciones desplegables de Primer CSS: Usamos las siguientes clases.
- menú desplegable-e: esta clase se usa para enumerar elementos en la dirección este.
- dropdown-menu-s: esta clase se usa para enumerar elementos en la dirección sur.
- menú desplegable-w: esta clase se usa para enumerar elementos en dirección oeste.
- menú desplegable-ne: esta clase se usa para enumerar elementos en la dirección noreste.
- dropdown-menu-sw: esta clase se usa para enumerar elementos en la dirección suroeste.
- dropdown-menu-se: esta clase se usa para enumerar elementos en la dirección sureste.
Primer CSS Dropdown Divider: Usamos la siguiente clase.
- dropdown-divider: esta clase se usa para agregar un divisor en la lista del menú desplegable.
Encabezado desplegable de Primer CSS: Usamos la siguiente clase.
- encabezado desplegable: esta clase se usa para agregar un encabezado en la lista del menú desplegable.
Sintaxis:
<div>
<details class="dropdown details-reset
details-overlay d-inline-block">
<summary class="btn" aria-haspopup="true">
Dropdown
<div class="dropdown-caret"></div>
</summary>
<ul class="dropdown-menu dropdown-menu-se">
<li> ... </li>
...
</ul>
</details>
</div>
Ejemplo 1: Este ejemplo demuestra el menú desplegable básico en Primer CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Primer CSS Dropdown</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <div class="m-4"> <h1 style="color: green"> GeeksforGeeks </h1> <h2> Primer CSS Dropdown </h2> </div> <div class="m-4"> <details class="dropdown details-reset details-overlay d-inline-block"> <summary class="btn" aria-haspopup="true"> Courses <div class="dropdown-caret"></div> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li> <a class="dropdown-item" href="#"> Java Fork </a> </li> <li> <a class="dropdown-item" href="#"> Python advanced </a> </li> <li> <a class="dropdown-item" href="#"> DSA fork </a> </li> </ul> </details> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra la implementación de todas las opciones desplegables en Primer CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Primer CSS Dropdown</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <div class="m-4 pt-4" style="text-align: center;"> <h1 style="color: green"> GeeksforGeeks </h1> <h2> Primer CSS Dropdown </h2> </div> <div class="container-lg clearfix"> <div class="col-4 float-left p-4"> <h3> .ne option </h3> <div class="m-4"> <details class="dropdown details-reset details-overlay d-inline-block"> <summary class="btn" aria-haspopup="true"> Jobs <div class="dropdown-caret"></div> </summary> <ul class="dropdown-menu dropdown-menu-ne"> <li> <a class="dropdown-item" href="#"> Apply for job </a> </li> <li> <a class="dropdown-item" href="#"> Post a job </a> </li> <li> <a class="dropdown-item" href="#"> JOB-A-THON </a> </li> </ul> </details> </div> </div> <div class="col-4 float-left p-4"> <h3> .e option </h3> <div class="m-4"> <details class="dropdown details-reset details-overlay d-inline-block"> <summary class="btn" aria-haspopup="true"> Courses <div class="dropdown-caret"></div> </summary> <ul class="dropdown-menu dropdown-menu-e"> <li> <a class="dropdown-item" href="#"> Java Fork </a> </li> <li> <a class="dropdown-item" href="#"> Python advanced </a> </li> <li> <a class="dropdown-item" href="#"> DSA fork </a> </li> </ul> </details> </div> </div> <div class="col-4 float-left p-4"> <h3> .se option </h3> <div class="m-4"> <details class="dropdown details-reset details-overlay d-inline-block"> <summary class="btn" aria-haspopup="true"> Tutorials <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="#"> CSS </a> </li> <li> <a class="dropdown-item" href="#"> HTML </a> </li> </ul> </details> </div> </div> </div> <div class="container-lg clearfix"> <div class="col-4 float-left p-4"> <h3> .s option </h3> <div class="m-4"> <details class="dropdown details-reset details-overlay d-inline-block"> <summary class="btn" aria-haspopup="true"> Jobs <div class="dropdown-caret"></div> </summary> <ul class="dropdown-menu dropdown-menu-s"> <li> <a class="dropdown-item" href="#"> Apply for job </a> </li> <li> <a class="dropdown-item" href="#"> Post a job </a> </li> <li> <a class="dropdown-item" href="#"> JOB-A-THON </a> </li> </ul> </details> </div> </div> <div class="col-4 float-left p-4"> <h3> .sw option </h3> <div class="m-4"> <details class="dropdown details-reset details-overlay d-inline-block"> <summary class="btn" aria-haspopup="true"> Courses <div class="dropdown-caret"></div> </summary> <ul class="dropdown-menu dropdown-menu-sw"> <li> <a class="dropdown-item" href="#"> Java Fork </a> </li> <li> <a class="dropdown-item" href="#"> Python advanced </a> </li> <li> <a class="dropdown-item" href="#"> DSA fork </a> </li> </ul> </details> </div> </div> <div class="col-4 float-left p-4"> <h3> .w option </h3> <div class="m-4"> <details class="dropdown details-reset details-overlay d-inline-block"> <summary class="btn" aria-haspopup="true"> Tutorials <div class="dropdown-caret"></div> </summary> <ul class="dropdown-menu dropdown-menu-w"> <li> <a class="dropdown-item" href="#"> DSA </a> </li> <li> <a class="dropdown-item" href="#"> CSS </a> </li> <li> <a class="dropdown-item" href="#"> HTML </a> </li> </ul> </details> </div> </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/dropdown
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA