Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Foundation CSS Button Dropdown Arrows es un estilo de botón que contiene una flecha desplegable. El botón de tipo de flecha desplegable se crea utilizando la clase .dropdown.
Clase usada:
- menú desplegable: esta clase se utiliza para crear un botón de flecha desplegable.
Sintaxis:
<a class="dropdown button" href="#">
Dropdown Button
</a>
or
<button type="button"
class="dropdown button">
Dropdown Button
</button>
Ejemplo 1: en este ejemplo, crearemos un botón usando la etiqueta <a> y usaremos la clase .button para hacer que el elemento de anclaje se ajuste al estilo del botón. Además, use la clase .dropdown para hacer que el botón tenga estilos de botón desplegable.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Button Dropdown Arrows</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"></script> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Button Dropdown Arrows</h3> <a class="dropdown button primary" href="#"> Dropdown Primary Button Arrow </a> <a class="dropdown button secondary" href="#"> Dropdown Secondary Button Arrow </a> <a class="dropdown button success" href="#"> Dropdown Success Button Arrow </a> <br> <a class="dropdown button alert" href="#"> Dropdown Alert Button Arrow </a> <a class="dropdown button warning" href="#"> Dropdown Warning Button Arrow </a> <a class="dropdown button disabled" href="#" aria-disabled> Dropdown Disabled Button Arrow </a> <br> <a class="dropdown button success tiny" href="#"> Dropdown Tiny Success Button Arrow </a> <a class="dropdown button alert small" href="#"> Dropdown Small Alert Button Arrow </a> <a class="dropdown button warning large" href="#"> Dropdown Large Warning Button Arrow </a> <a class="dropdown button expanded" href="#"> Dropdown Expended Button Arrow </a> </center> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, crearemos un botón usando la etiqueta <button> y usaremos la clase .button. Además, use la clase .dropdown para crear estilos de botones desplegables.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Button Dropdown Arrows</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"></script> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Button Dropdown Arrows</h3> <button type="button" class="dropdown button primary"> Dropdown Primary Button Arrow </button> <button type="button" class="dropdown button secondary"> Dropdown Secondary Button Arrow </button> <button type="button" class="dropdown button success"> Dropdown Success Button Arrow </button> <br> <button type="button" class="dropdown button alert"> Dropdown Alert Button Arrow </button> <button type="button" class="dropdown button warning"> Dropdown Warning Button Arrow </button> <button type="button" class="dropdown button disabled"> Dropdown Disabled Button Arrow </button> <br> <button type="button" class="dropdown button success tiny"> Dropdown Tiny Success Button Arrow </button> <button type="button" class="dropdown button alert small"> Dropdown Small Alert Button Arrow </button> <button type="button" class="dropdown button warning large"> Dropdown Large Warning Button Arrow </button> <button type="button" class="dropdown button expanded"> Dropdown Expended Button Arrow </button> </center> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/button.html#dropdown-arrows