Foundation CSS es un marco front-end de código abierto que simplifica y agiliza la creación de sitios web, aplicaciones móviles y correos electrónicos sorprendentes y con capacidad de respuesta. Septiembre de ese año vio a ZURB publicarlo. Muchas empresas, incluidas Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Basado en el marco Bootstrap, este marco imita a SaaS. Más complejas, adaptables y únicas son sus características. La facilidad de uso de su interfaz de línea de comandos hace que trabajar con paquetes de módulos sea muy sencillo. El software de creación de correo electrónico utiliza HTML para producir correos electrónicos receptivos que funcionan bien en dispositivos móviles. Hacer aplicaciones web completamente receptivas es posible con Foundation for Apps.
Un menú es un enfoque increíble para crear una lista de enlaces que ayudarán al usuario a navegar por el sitio web. Podemos configurar el menú para diferentes alineaciones como vertical . Podemos usar Sticky Navigation para mantener el menú atascado en la parte superior de la página web.
Clases de navegación fija del menú CSS básico:
- menu: Esta clase se usa para agregar un menú básico. Esta clase se usa dentro de un elemento <ul> .
Atributos de navegación fijos del menú Foundation CSS:
- [data-sticky-container] : este atributo se agrega al contenedor que desea convertir en un contenedor fijo. Este atributo no acepta ningún valor.
- [data-sticky] : este atributo se agrega al contenedor en el que desea crear un elemento fijo. Este atributo no acepta ningún valor.
Sintaxis:
<div data-sticky-container>
<ul class ="menu" data-sticky>
<li>...</li>
<li>...</li>
</ul>
</div>
Ejemplo 1: en el código que se proporciona a continuación, un menú básico se vuelve fijo utilizando los atributos indicados anteriormente.
HTML
<!DOCTYPE html> <html> <head> <!-- 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/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <div data-sticky-container> <ul class="menu" data-sticky> <li> <a href="#">Placement Course</a> </li> <li> <a href="#">DSA</a> </li> <li> <a href="#">Algorithms</a> </li> </ul> </div> <div class='column row' id='root'> <h1 class="text-center" style="color:green;"> GeeksforGeeks </h1> <h3 class="text-center"> Foundation CSS Menu Sticky Navigation </h3> <p class="margin-3"> Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. </p> <p class="margin-3"> Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. </p> <p class="margin-3"> Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. </p> <p class="margin-3"> Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. </p> <p class="margin-3"> Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. </p> <p class="margin-3"> Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. </p> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Ejemplo 2: en el código que se muestra a continuación, un menú con íconos y un estado activo se vuelve fijo usando los atributos mencionados anteriormente.
HTML
<!DOCTYPE html> <html> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css"/> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> <script src= "https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"> </script> <script src= "https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"> </script> </head> <body> <div data-sticky-container class="margin-left-2"> <ul class="menu" data-sticky> <li class="is-active"> <a href="#"><ion-icon name="id-card-outline"></ion-icon> Placement Course </a> </li> <li> <a href="#"><ion-icon name="rocket-outline"></ion-icon> DSA </a> </li> <li> <a href="#"><ion-icon name="telescope-outline"></ion-icon> Algorithms </a> </li> </ul> </div> <div class='column row margin-top-3' id='root'> <h1 class="text-center" style="color:green;"> GeeksforGeeks </h1> <h3 class="text-center"> Foundation CSS Menu Sticky Navigation </h3> <p class="margin-3"> Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. </p> <p class="margin-3"> Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. </p> <p class="margin-3"> Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. </p> <p class="margin-3"> Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. </p> <p class="margin-3"> Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. </p> <p class="margin-3"> Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. Welcome to GFG. This is an example line. Hi Geeks!! Welcome to GeeksForGeeks. This is an example line. </p> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Referencias: https://get.foundation/sites/docs/sticky.html#sticky-navigation
Publicación traducida automáticamente
Artículo escrito por triashabiswas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA