Foundation CSS es un marco front-end gratuito y de código abierto que ayuda en la creación de diseños web flexibles. Es uno de los marcos CSS más potentes y funciona en todos los dispositivos, brindando una cuadrícula receptiva, así como componentes de interfaz de usuario HTML y CSS, plantillas y más. También incluye algunas funciones opcionales de extensiones de JavaScript. Debido a la inclusión de la utilidad Fastclick.js, también ofrece una representación rápida en dispositivos móviles.
La barra de navegación es la forma de agregar una forma de tener enlaces en una orientación horizontal que nos ayude a navegar entre diferentes ubicaciones en la página web. Generalmente, una barra de navegación está en la parte superior, pero en algunos diseños de diseño, se mantienen a la izquierda y a la derecha o incluso al final de la línea.
Foundation CSS Sticky Navigation se puede utilizar agregando la clase .sticky a la barra de navegación, lo que nos permitirá agregar una barra de navegación adhesiva. La barra de navegación está encerrada en un contenedor adhesivo en este caso. Aquí se crea una barra de navegación fija agregando un atributo fijo de datos a la clase .title-bar .
Clases de la barra de navegación Foundation CSS:
- title-bar: esta clase se usa para hacer una barra de navegación de título que es la barra de navegación que está en la parte superior con un color de fondo.
- title-bar-left: esta clase se usa para agregar contenido o componentes de la interfaz de usuario en el lado izquierdo de la barra de navegación.
- title-bar-right: esta clase se usa para agregar contenido o componentes de la interfaz de usuario en el lado derecho de la barra de navegación.
Atributos de la barra de navegación de Foundation CSS:
- data-sticky-container: este atributo se agrega al contenedor que está destinado a ser un contenedor fijo. Este atributo no tiene ningún valor.
- data-sticky: este atributo se agrega al contenedor que está destinado a ser un elemento fijo. Este atributo no tiene ningún valor.
Sintaxis:
<div data-sticky-container>
<div class="title-bar" data-sticky data-options="marginTop:0;">
<div class="title-bar-left"> Content </div>
<div class="title-bar-right"> Content </div>
</div>
</div>
Ejemplo: Este ejemplo muestra una barra de navegación fija en una página web usando Foundation CSS.
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> <div class="title-bar" data-sticky data-options="marginTop:0;"> <div class="title-bar-left"> <span class="title-bar-title"> GeeksforGeeks </span> </div> <div class="title-bar-right"> <ul class="dropdown menu align-right" data-dropdown-menu> <li> <a>DSA</a> <ul class="menu"> <li> <a href="#">Item 1A</a> </li> <li> <a href="#">Item 1B</a> </li> <li> <a href="#">Item 1C</a> </li> </ul> </li> <li> <a href="#">Algorithms</a> <ul class="menu"> <li> <a href="#">Item 2A</a> </li> <li> <a href="#">Item 2B</a> </li> </ul> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">C++</a> </li> </ul> </div> </div> </div> <div class='column row' id='root'> <h1 class="text-center" style="color:green;"> GeeksforGeeks </h1> <h3 class="text-center"> Foundation CSS Top Bar 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:
Referencia: https://get.foundation/sites/docs/sticky.html#sticky-navigation
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA