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.
Un menú en Foundation CSS es una lista de navegación que contiene los diferentes componentes que redirigen a las distintas páginas vinculadas en los sitios web o aplicaciones web. Estado activo en el caso del menú significa que marca el elemento como una página activa.
Menú CSS básico Clases de estado activo:
- is-active: esta clase se usa en cualquier elemento <li> para crear un elemento de estado activo que lo marca como una página activa.
Sintaxis:
<ul class ="menu">
<li class="is-active"><a>....</a></li>
<li>....</li>
</ul>
Ejemplo 1: este es un ejemplo básico que ilustra el estado activo realizado con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Menu Active State</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/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"> </script> </head> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <strong>Foundation CSS Menu Active State</strong> </center> <ul class="menu"> <li class="is-active"><a>Home</a></li> <li><a>Data Structures</a></li> <li><a>Algorithms</a></li> <li><a>Fundamentals</a></li> <li><a>About Us</a></li> </ul> <script> $(document).foundation(); </script> </body> </html>
Producción:
Estado activo del menú Foundation CSS
Ejemplo 2: este es un ejemplo básico que ilustra un estado activo vertical creado con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Menu Active State</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/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"> </script> </head> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <strong>Foundation CSS Menu Active State</strong> </center> <ul class="menu vertical"> <li class="is-active"><a>Home</a></li> <li><a>Data Structures</a></li> <li><a>Algorithms</a></li> <li><a>Fundamentals</a></li> <li><a>About Us</a></li> </ul> <script> $(document).foundation(); </script> </body> </html>
Producción:
Estado activo del menú Foundation CSS
Ejemplo 3: Este es un ejemplo básico que ilustra un estado activo vertical anidado creado con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Menu Active State</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/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"> </script> </head> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <strong>Foundation CSS Menu Active State</strong> </center> <ul class="menu vertical"> <li class="is-active"><a>Home</a></li> <li><a>Data Structures</a></li> <ul class="nested vertical menu"> <li><a href="#">Linked List</a></li> <li><a href="#">Stack</a></li> <li><a href="#">Queue</a></li> <li><a href="#">Trees</a></li> </ul> <li><a>Algorithms</a></li> <li><a>Fundamentals</a></li> <li><a>About Us</a></li> </ul> <script> $(document).foundation(); </script> </body> </html>
Producción:
Estado activo del menú Foundation CSS
Referencia: https://get.foundation/sites/docs/menu.html