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 diversas páginas vinculadas en los sitios web o aplicaciones web. Mientras que el texto del menú significa el texto en el menú que no tiene el enlace dentro de él. Entonces, en tal caso, no usamos una etiqueta de anclaje ya que el texto puede estar desalineado.
Clase de texto del menú Foundation CSS:
- menu-text: Esta clase crea un texto de menú que no contiene un enlace dentro de él.
Sintaxis:
<ul class ="menu">
<li class="menu-text">....</li>
<li>....</li>
</ul>
Ejemplo 1: Este es un ejemplo básico que ilustra el texto del menú creado con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Menu Text</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 Text</strong> <ul class="menu"> <li class="menu-text">GeeksforGeeks</li> <li><a href="#">Data Structures</a></li> <li><a href="#">Algorithm</a></li> <li><a href="#">Interview Preparation</a></li> <li><a href="#">About Us</a></li> </ul> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Texto del menú CSS básico
Ejemplo 2: Este es un ejemplo básico que ilustra el texto del menú alineado a la derecha creado con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Menu Text</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 Text</strong> <ul class="menu align-right"> <li class="menu-text">GeeksforGeeks</li> <li><a href="#">Data Structures</a></li> <li><a href="#">Algorithm</a></li> <li><a href="#">Interview Preparation</a></li> <li><a href="#">About Us</a></li> </ul> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Texto del menú CSS básico
Ejemplo 3: Este es un ejemplo básico que ilustra el texto del menú vertical creado con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Menu Text</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 Text</strong> <ul class="menu vertical"> <li class="menu-text">GeeksforGeeks</li> <li><a href="#">Data Structures</a></li> <li><a href="#">Algorithm</a></li> <li><a href="#">Interview Preparation</a></li> <li><a href="#">About Us</a></li> </ul> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Texto del menú CSS básico
Referencia: https://get.foundation/sites/docs/menu.html