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.
El menú desplegable se usa para mostrar un menú desplegable expandible mediante el complemento Foundation CSS.
Clase de menú desplegable de Foundation CSS:
- menú desplegable: esta clase se usa para cambiar un menú básico a un menú desplegable expandible.
- menu: esta clase se utiliza para crear elementos de menú básicos. Esta clase se usa dentro del elemento <ul> .
Sintaxis:
<ul class="dropdown menu" data-dropdown-menu> <li><a href="#">....</a></li> .... </ul>
Ejemplo 1: menú desplegable horizontal, el siguiente código muestra un menú desplegable horizontal.
HTML
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Foundation Dropdowns</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/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"> </script> </head> <body> <h1 style="color:green;">GeeksforGeeks </h1> <h3>Foundation CSS Horizontal Dropdown Menu</h3> <ul class="dropdown menu" data-dropdown-menu> <li> <a href="#">Tutorials</a> <ul class="menu"> <li><a href="#">Practice DS & Algo.</a></li> <li><a href="#">Algorithms</a></li> <li><a href="#">Data Structures</a></li> <li><a href="#">Interview Corner</a></li> <li><a href="#">Languages</a></li> <li><a href="#">CS Subjects</a></li> <li><a href="#">GATE</a></li> <li><a href="#">Web Technologies</a></li> </ul> </li> <li><a href="#">Student</a> <ul class="menu"> <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 the Month</a></li> <li><a href="#">Placement Course</a></li> <li><a href="#">Competitive Programming</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Careers</a></li> </ul> </li> <li><a href="#">Jobs</a> <ul class="menu"> <li><a href="#">Apply for Jobs</a></li> <li><a href="#">Post a Job</a></li> </ul> </li> <li><a href="#">Courses</a></li> </ul> <script> $(document).foundation(); </script> </body> </html>
Producción:
Menú desplegable de Foundation CSS Desplegable horizontal
Ejemplo 2: para el menú desplegable vertical, simplemente agregue la clase vertical al menú desplegable y agregue la clase de menú anidado vertical en el submenú del menú desplegable.
HTML
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Foundation Dropdowns</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/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"> </script> </head> <body> <h1 style="color:green;">GeeksforGeeks </h1> <h3>Foundation CSS vertical Dropdown Menu</h3> <ul class="vertical dropdown menu" data-dropdown-menu style="max-width:250px;"> <li> <a href="#">Tutorials</a> <ul class="vertical menu nested"> <li><a href="#">Practice DS & Algo.</a></li> <li><a href="#">Algorithms</a></li> <li><a href="#">Data Structures</a></li> <li><a href="#">Interview Corner</a></li> <li><a href="#">Languages</a></li> <li><a href="#">CS Subjects</a></li> <li><a href="#">GATE</a></li> <li><a href="#">Web Technologies</a></li> </ul> </li> <li><a href="#">Student</a> <ul class="vertical menu 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 the Month</a></li> <li><a href="#">Placement Course</a></li> <li><a href="#">Competitive Programming</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Careers</a></li> </ul> </li> <li><a href="#">Jobs</a> <ul class="vertical menu nested"> <li><a href="#">Apply for Jobs</a></li> <li><a href="#">Post a Job</a></li> </ul> </li> <li><a href="#">Courses</a></li> </ul> <script> $(document).foundation(); </script> </body> </html>
Producción:
Menú desplegable de Foundation CSS Desplegable vertical
Referencias: https://get.foundation/sites/docs/dropdown-menu.html
Publicación traducida automáticamente
Artículo escrito por ishankhandelwals y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA