Foundation CSS es un marco front-end de código abierto que se utiliza para crear un sitio web, un correo electrónico o una aplicación atractivos y receptivos de forma rápida y sencilla. En septiembre de 2011, ZURB lo publicó. Lo utilizan muchas empresas, incluidas Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco Bootstrap sirve como base para esta plataforma, que imita a SaaS. Es más complejo, adaptable y único. Debido a su interfaz de línea de comandos, trabajar con paquetes de módulos también es muy sencillo. El marco de correo electrónico genera correos electrónicos HTML que son aptos para dispositivos móviles y legibles en todos los dispositivos. Puede crear aplicaciones web totalmente receptivas utilizando Foundation for Apps.
Se utiliza un menú desplegable para mostrar el menú como un menú ampliado con ciertos elementos. Para ordenar nuestros artículos, podemos hacer un menú desplegable horizontal y vertical. El menú se crea mediante un menú desplegable horizontal y los submenús se orientan automáticamente de forma vertical. En este artículo, veremos cómo podemos usar la navegación fija en un menú desplegable. Para aplicar la navegación fija a un menú desplegable, debemos agregar los atributos de navegación fija al menú desplegable.
Foundation CSS Sticky Navigation Menú desplegable Clases utilizadas:
- menu: Esta clase se utiliza para crear un menú básico con una lista de elementos. Esta clase se usa dentro del elemento <ul>. El menú creado es de tipo horizontal por defecto.
- desplegable: esta clase se utiliza para transformar un menú básico en un menú desplegable ampliable.
Atributos usados de Foundation CSS Sticky Navigation:
- [data-sticky-container]: este atributo se agrega al contenedor que se transforma en el contenedor fijo. Este atributo no toma ningún valor.
- [data-sticky]: este atributo se agrega al contenedor que se transforma en el elemento fijo. Este atributo no toma ningún valor.
Sintaxis:
<div data-sticky-container>
<ul class="dropdown menu" data-sticky data-dropdown-menu>
<li><a href="#">....</a></li>
....
</ul>
</div>
Ejemplo 1: el siguiente código muestra un menú desplegable básico transformado en navegación fija.
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 data-sticky> <ul class="dropdown menu" data-dropdown-menu style= "background-color: lightgrey; margin-top: 0;"> <li> <a href="#">GFG 1</a> <ul class="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </li> <li><a href="#">GFG 2</a> <ul class="menu"> <li><a href="#">item a</a> <ul class="menu"> <li><a href="#">item a1</a></li> <li><a href="#">item a2</a></li> </ul> </li> <li><a href="#">item b</a></li> </ul> </li> <li><a href="#">GFG 3</a></li> </ul> </div> </div> <div class='column row' id='root'> <h1 class="text-center" style="color:green;"> GeeksforGeeks </h1> <h3 class="text-center"> Foundation CSS Sticky Navigation Dropdown Menu </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: El siguiente código muestra un menú desplegable vertical que es pegajoso.
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 data-sticky> <ul class="vertical dropdown menu" data-dropdown-menu style="max-width:250px; background-color: lightgray"> <li> <a href="#">GFG 1</a> <ul class="vertical menu nested"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </li> <li><a href="#">GFG 2</a> <ul class="vertical menu nested"> <li><a href="#">item a</a> <ul class="vertical menu nested"> <li><a href="#">item a1</a></li> <li><a href="#">item a2</a></li> </ul> </li> <li><a href="#">item b</a></li> </ul> </li> <li><a href="#">GFG 3</a></li> </ul> </div> </div> <div class='column row' id='root'> <h1 class="text-center" style="color:green;"> GeeksforGeeks </h1> <h3 class="text-center"> Foundation CSS Sticky Navigation Dropdown Menu </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/dropdown-menu.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