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.
Los menús son las principales herramientas para que los visitantes naveguen por un sitio web. Foundation CSS Vertical Menu se utiliza para crear un menú de navegación orientado verticalmente. Los elementos del menú se crean utilizando elementos <ul> y <li>.
Menú CSS básico Clase de menú vertical:
- vertical: esta clase se utiliza para crear un menú de navegación orientado verticalmente. Esta clase se usa con la clase de menú dentro del elemento <ul>.
- vertical align-right: esta clase se utiliza para crear un menú de navegación orientado verticalmente con alineación a la derecha. Esta clase se usa con la clase de menú dentro del elemento <ul>.
- centro de alineación vertical: esta clase se utiliza para crear un menú de navegación orientado verticalmente con el centro alineado. Esta clase se usa con la clase de menú dentro del elemento <ul>.
Sintaxis:
<ul class="menu vertical"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> . . . </ul>
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Menu Vertical 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://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"></script> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Menu Vertical Menu</h3> <ul class="menu vertical"> <li><a href="#">GeeksforGeeks</a></li> <li><a href="#">Web Technology</a></li> <li><a href="#">Data Structure</a></li> <li><a href="#">Programming</a></li> <li><a href="#">Algorithm</a></li> </ul> </body> </html>
Producción:
Menú CSS básico Menú vertical
Referencia: https://get.foundation/sites/docs/menu.html#vertical-menu