Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que hace que sea muy fácil diseñar 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.
The Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. El componente del menú de desglose es específicamente para la navegación y crea un patrón de desglose. Esto es específico para la navegación, por lo que se denomina menú detallado. Se usa comúnmente para dispositivos móviles como un menú de navegación o simplemente como una barra lateral.
Modificaciones del menú detallado:
- autoHeight: el menú desplegable aplica la altura del menú más alto de la jerarquía, por lo que el menú no cambia de altura a medida que el usuario navega por él. Sin embargo, el usuario puede seleccionar la altura en autoHeight para que el menú desplegable utilice la altura de la pestaña activa. Para usar la función autoHeight, cambie data-auto-height y data-animate-height a true .
- ScrollTop: esta herramienta es muy útil para menús más largos y proporciona una mejor experiencia de usuario. ScrollTop Drilldown se desplaza a la parte superior del menú al seleccionar un submenú o simplemente al volver al menú anterior. Para usar la función ScrollTop Drilldown, cambie el valor del atributo data-scroll-top a true .
Clases del menú detallado de Foundation CSS:
- desglose de menú vertical: estas clases se aplican a la etiqueta <ul>. Esto convierte una lista desordenada en un menú desplegable.
- menú vertical anidado: estas clases se aplican a la etiqueta <ul>. Esto convierte una lista desordenada anidada en un submenú del menú desplegable.
Sintaxis:
<ul class="vertical menu drilldown" data-drilldown>
<li>
<a>Tab 1</a>
<ul class = "menu">
<li><a href = "#">Subtab 1</a></li>
</ul>
</li>
<ul>
Ejemplo: El siguiente código muestra un menú detallado básico .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Kitchen Sink Drilldown 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 Drilldown Menu</h3> <br /> <ul class="vertical menu drilldown" data-drilldown style="width: 200px"> <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> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Menú detallado del fregadero de la cocina de Foundation CSS
Ejemplo 2: el siguiente código muestra un menú detallado con la función de altura automática.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Kitchen Sink Drilldown 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 style="padding: 2rem 1rem;"> <h1 style="color: green">GeeksforGeeks</h1> <h3>Foundation CSS Kitchen Sink Drilldown Menu</h3> <br /> <div class="row"> <div class="columns"> <ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-animate-height="true" style="max-width: 120px"> <li> <a href="#">Item 1</a> <ul class="menu"> <li> <a href="#">Item 1A</a> <ul class="menu"> <li> <a href="#Item-1Aa"> Item 1Aa </a> </li> <li> <a href="#Item-1Ba"> Item 1Ba </a> </li> </ul> </li> <li><a href="#Item-1B">Item 1B</a></li> <li><a href="#Item-1C">Item 1C</a></li> <li><a href="#Item-1D">Item 1D</a></li> <li><a href="#Item-1E">Item 1E</a></li> </ul> </li> <li> <a href="#">Item 2</a> <ul class="menu"> <li><a href="#Item-2A">Item 2A</a></li> <li><a href="#Item-2B">Item 2B</a></li> <li><a href="#Item-2C">Item 2C</a></li> <li><a href="#Item-2D">Item 2D</a></li> <li><a href="#Item-2E">Item 2E</a></li> </ul> </li> <li> <a href="#">Item 3</a> <ul class="menu"> <li><a href="#Item-3A">Item 3A</a></li> <li><a href="#Item-3B">Item 3B</a></li> <li><a href="#Item-3C">Item 3C</a></li> <li><a href="#Item-3D">Item 3D</a></li> <li> <a href="#Item-3E">Item 3E</a> <ul class="menu"> <li> <a href="#Item-3EA"> Item 3EA </a> </li> <li> <a href="#Item-3EB"> Item 3EB </a> </li> </ul> </li> </ul> </li> </ul> </div> </div> <h3>GeeksForGeeks</h3> <script> $(document).foundation(); </script> </body> </html>
Producción:
Menú detallado del fregadero de la cocina de Foundation CSS
Ejemplo 3: el siguiente código muestra un menú detallado con la característica ScrollTop Drilldown.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Kitchen Sink Drilldown 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 style="padding: 2rem 1rem;"> <center> <h1 style="color: green">GeeksforGeeks</h1> <h3>Foundation CSS Kitchen Sink Drilldown Menu</h3> <br /> <div class="row"> <div class="columns"> <ul class="vertical menu drilldown" data-drilldown data-scroll-top="true" style="max-width: 150px"> <li> <a href="#">Item 1</a> <ul class="menu"> <li> <a href="#">Item 1A</a> <ul class="menu"> <li> <a href="#Item-1Aa"> Item 1Aa </a></li> <li> <a href="#Item-1Ba"> Item 1Ba </a> </li> </ul> </li> <li><a href="#Item-1B">Item 1B</a></li> <li><a href="#Item-1C">Item 1C</a></li> <li><a href="#Item-1D">Item 1D</a></li> <li><a href="#Item-1E">Item 1E</a></li> </ul> </li> <li> <a href="#">Item 2</a> <ul class="menu"> <li><a href="#Item-2A">Item 2A</a></li> <li><a href="#Item-2B">Item 2B</a></li> <li><a href="#Item-2C">Item 2C</a></li> <li><a href="#Item-2D">Item 2D</a></li> <li><a href="#Item-2E">Item 2E</a></li> </ul> </li> <li> <a href="#">Item 3</a> <ul class="menu"> <li><a href="#Item-3A">Item 3A</a></li> <li><a href="#Item-3B">Item 3B</a></li> <li><a href="#Item-3C">Item 3C</a></li> <li><a href="#Item-3D">Item 3D</a></li> <li> <a href="#Item-3E">Item 3E</a> <ul class="menu"> <li><a href="#Item-3EA"> Item 3EA</a> </li> <li><a href="#Item-3EB"> Item 3EB</a> </li> <li><a href="#Item-3EC"> Item 3EC</a> </li> <li><a href="#Item-3ED"> Item 3ED</a> </li> <li><a href="#Item-3EE"> Item 3EE</a> </li> <li><a href="#Item-3EA"> Item 3EA</a> </li> <li><a href="#Item-3EB"> Item 3EB</a> </li> <li><a href="#Item-3EC"> Item 3EC</a> </li> <li><a href="#Item-3ED"> Item 3ED</a> </li> <li><a href="#Item-3EE"> Item 3EE</a> </li> <li><a href="#Item-3EA"> Item 3EA</a> </li> <li><a href="#Item-3EB"> Item 3EB</a> </li> <li><a href="#Item-3EC"> Item 3EC</a> </li> <li><a href="#Item-3ED"> Item 3ED</a> </li> <li><a href="#Item-3EE"> Item 3EE</a> </li> </ul> </li> </ul> </li> </ul> </div> </div> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Menú detallado del fregadero de la cocina de Foundation CSS
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#drilldown-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