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. En la sección Navegación de alineación de elementos del menú, de forma predeterminada, cada elemento del menú de navegación está alineado a la izquierda. Para hacer que el menú de navegación se alinee a la derecha, usaremos la clase align-right .
Clase de alineación de elemento de menú de CSS básico:
- align-left: esta clase se utiliza para alinear el menú de navegación al lado izquierdo. Esta clase se usa con la clase de menú dentro del elemento <ul>. Solo se puede usar cuando el menú de navegación se coloca en un entorno de derecha a izquierda.
- align-right: esta clase se utiliza para alinear el menú de navegación al lado derecho. Esta clase se usa con la clase de menú dentro del elemento <ul>.
- align-center: esta clase se utiliza para alinear el menú de navegación al centro. Esta clase se usa con la clase de menú dentro del elemento <ul>.
- expandido: esta clase se usa para colocar los elementos del menú usando una cantidad uniforme de espacio. Esta clase se usa con la clase de menú dentro del elemento <ul>.
Sintaxis:
<ul class="menu align-right"> <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 Item Alignment</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> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Menu Item Alignment</h3> </center> <ul class="menu align-center"> <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:
Alineación de elementos de menú de Foundation CSS
Referencia: https://get.foundation/sites/docs/menu.html#item-alignment