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 para que se vean increíbles y puedan 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.
El menú desplegable es uno de los tres patrones de menú de Foundation CSS. Esto convierte una serie de listas anidadas en un menú desplegable vertical. Para hacer un menú detallado, usamos la sintaxis de Menú estándar, usando <ul>, <li> y <a> y agregamos la clase de «desglose de datos» junto con las clases de «desglose de menú vertical» al menú raíz para configurar el desglose
Para crear submenús, colocamos un <ul> al lado de un <a>, ese <a> abrirá el <ul> al lado. Las etiquetas de anclaje sin un submenú funcionarán como un enlace normal. Para anidar otro menú dentro del menú principal, usamos las clases de «menú vertical anidado» para la etiqueta <ul> anidada.
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 href="#">Title</a></li>
...
</ul>
Ejemplo 1: Este ejemplo demuestra el menú de desglose creado con el CSS básico.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Drilldown Menu</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://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" crossorigin="anonymous"></script> </head> <body style="padding: 30px;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Foundation CSS Drilldown Menu</strong><br/><br/> </center> <ul class="vertical menu drilldown" data-drilldown style="max-width: 200px" data-drilldown> <li><a href="#">Tutorial</a></li> <li><a href="#">Student</a></li> <li><a href="#">Job</a></li> <li><a href="#">Login</a></li> <li><a href="#">Courses</a></li> <li><a href="#">Programs</a></li> <li><a href="#">Intern</a></li> <li><a href="#">Career</a></li> </ul> <script> $(document).foundation(); </script> </body> </html>
Producción:
Producción
Ejemplo 2: Este ejemplo demuestra el menú desplegable anidado creado con el CSS básico.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Drilldown Menu</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://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" crossorigin="anonymous"></script> </head> <body style="padding: 30px;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Foundation CSS Drilldown Menu</strong><br/><br/> </center> <ul class="vertical menu drilldown" data-drilldown style="max-width: 200px" data-drilldown> <li><a href="#">Tutorial</a></li> <li> <a href="#">Student</a> <ul class="menu vertical nested"> <li><a href="#">Campus Ambassador Program</a></li> <li><a href="#">School Ambassador Program</a></li> <li><a href="#">Project</a></li> <li><a href="#">Geek of month</a></li> <li><a href="#">Campus Geek of month</a></li> <li><a href="#">Placement course</a></li> <li><a href="#">Internship</a></li> <li><a href="#">Testimonial</a></li> </ul> </li> <li><a href="#">Job</a></li> <li><a href="#">Login</a></li> </ul> <script> $(document).foundation(); </script> </body> </html>
Producción:
Producción
Referencia: https://get.foundation/sites/docs/drilldown-menu.html
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA