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. 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. 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.
The Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. El componente Menú desplegable es una forma de crear un menú desplegable en la navegación donde se puede tener un menú desplegable de varios niveles y se pueden mostrar datos en un formato de lista. Al ser específico para la navegación, se denomina menú desplegable .
Foundation CSS Kitchen Sink Menú desplegable Clases:
- horizontal: el menú desplegable se basa en la sintaxis del componente Menú. Al agregar la clase .dropdown y el atributo data-dropdown-menu al contenedor del menú, se configura el menú desplegable.
- vertical: para agregar un menú desplegable vertical, agregue la clase .vertical al menú superior. Los submenús son automáticamente verticales, independientemente de la orientación del menú de nivel superior.
Sintaxis:
<ul class="dropdown menu" data-dropdown-menu>
<a href="#">Tab 1</a>
<a href="#">Tab 2</a>
<uil>
Ejemplo 1: el siguiente código muestra un menú desplegable horizontal
HTML
<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr"> <head> <title>Foundation CSS Kitchen Sink Dropdown Menu</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <h3>Foundation CSS Kitchen Sink Dropdown Menu</h3> <br /> <ul class="dropdown menu" data-dropdown-menu> <li> <a>Tab 1</a> <ul class="menu"> <li><a href="#">Subtab 1</a></li> <li> <a href='#'>Subtab 2</a> <ul class='menu'> <li><a href='#'>Subtab 2(1)</a></li> <li><a href='#'>Subtab 2(2)</a></li> <li> <a href='#'>Subtab 2(3)</a> <ul class='menu'> <li><a href='#'> Subtab 2(3[1]) </a></li> <li><a href='#'> Subtab 2(3[2]) </a></li> </ul> </li> </ul> </li> <li><a href="#">Subtab 3</a></li> </ul> </li> <li> <a href="#">Tab 2</a> <ul class="menu"> <li><a href="#">Subtab 1</a></li> <li><a href="#">Subtab 2</a></li> </ul> </li> <li><a href="#">Tab 3</a></li> </ul> </ul> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Fregadero de cocina Menú desplegable horizontal
Ejemplo 2: el siguiente código muestra un menú desplegable vertical
HTML
<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr"> <head> <title>Foundation CSS Kitchen Sink Dropdown Menu</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <h3>Foundation CSS Kitchen Sink Dropdown Menu</h3> <br /> </center> <ul class="vertical dropdown menu" data-dropdown-menu style="max-width: 250px;"> <li> <a>Tab 1</a> <ul class="menu"> <li><a href="#">Subtab 1</a></li> <li> <a href='#'>Subtab 2</a> <ul class='menu'> <li><a href='#'>Subtab 2(1)</a></li> <li><a href='#'>Subtab 2(2)</a></li> <li> <a href='#'>Subtab 2(3)</a> <ul class='menu'> <li><a href='#'> Subtab 2(3[1]) </a></li> <li><a href='#'> Subtab 2(3[2]) </a></li> </ul> </li> </ul> </li> <li><a href="#">Subtab 3</a></li> </ul> </li> <li> <a href="#">Tab 2</a> <ul class="menu"> <li><a href="#">Subtab 1</a></li> <li><a href="#">Subtab 2</a></li> </ul> </li> <li><a href="#">Tab 3</a></li> </ul> </ul> <script> $(document).foundation(); </script> </body> </html>
Producción:
Fregadero de cocina Menú desplegable vertical
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#dropdown-menu
Publicación traducida automáticamente
Artículo escrito por vividhpandey13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA