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.
Una barra superior crea un estilo de navegación y actúa como un envoltorio visual para el componente de menú, no es un menú en sí mismo, sino el estilo que podemos querer usar para crear los elementos de navegación de una manera simple y rápida. Proporciona una opción para hacer que nuestro menú sea un componente y nos brinda una forma de dividir el contenido de izquierda a derecha. El diseño avanzado de la barra superior es similar a la barra superior de Foundation CSS, con la única diferencia de que, en el caso del diseño avanzado, configuramos un menú receptivo con un activador de clic de alternancia en el dispositivo móvil. La barra de título puede verse en pantallas pequeñas, de forma predeterminada, además de ocultar el menú. El menú siempre estará visible, pero la barra de título desaparecerá para el punto de interrupción medio. El atributo data-hide-for se puede utilizar para cambiar el punto de interrupción.
Clase de diseño avanzado de la barra superior de Foundation CSS:
- barra superior: esta clase define una barra superior en Foundation CSS.
- top-bar-left: esta clase debe contener los elementos en el lado izquierdo de la barra de navegación.
- top-bar-right: esta clase debe contener los elementos en el lado derecho de la barra de navegación.
- menu-text: Esta clase indica que este elemento de la lista no tiene un enlace dentro.
- menú desplegable: esta clase configura un menú desplegable para el contenedor del menú.
- data-responsive-toggle : esta clase se puede usar para crear el menú de alternancia receptivo que contiene el valor de identificación del menú para el que se aplica la alternancia.
- data-toggle : Se utiliza para activar la alternancia de los elementos que contienen este atributo.
- vertical: Esta clase crea un menú vertical.
- barra de título: esta clase actúa como un envoltorio para el menú desplegable receptivo que vamos a construir.
- title-bar-title: Esta clase consiste en el título de nuestra barra de título.
Sintaxis:
<div class="title-bar">
<div class="title-bar-title">...</div>
</div>
<div class="top-bar">
<div class="top-bar-left">
<ul>
<li>..</li>
....
</ul>
</div>
<div class="top-bar-right">
<ul>
<li>..</li>
....
</ul>
</div>
</div>
Nota:
- Los valores de los atributos data-responsive-toggle y data-toggle deben ser iguales a la identificación única del menú.
- El atributo data-hide-for especifica de qué dispositivos se debe ocultar.
- Aquí, usamos el botón para dar el icono de nuestro menú.
Ejemplo 1: Este es un ejemplo básico que ilustra el diseño avanzado de la barra superior usando Foundation CSS en una pantalla de tamaño normal.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS TopBar</title> <!-- 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= "//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" /> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> </script> </head> <body> <center> <div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium" style="width: 60%;"> <button class="menu-icon" type="button" data-toggle="responsive-menu"> </button> <div class="title-bar-title"> Menu </div> </div> <center> <div class="top-bar" style="width: 60%;" id="responsive-menu"> <div class="top-bar-left"> <ul class="dropdown menu" data-dropdown-menu> <li class="menu-text">Company Name</li> <li> <a href="#">Home</a> </li> <li> <a href="#">Products</a> <ul class="menu vertical"> <li> <a href="#">Mobiles</a> </li> <li> <a href="#">Laptops</a> </li> <li> <a href="#">Tablets</a> </li> </ul> </li> <li> <a href="#">About Us</a> </li> <li> <a href="#">Login</a> </li> </ul> </div> <div class="top-bar-right"> <ul class="menu"> <li> <input type="search" placeholder="Search"> </li> <li> <button type="button" class="button">Search </button> </li> </ul> </div> </div> </center> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Diseño avanzado de la barra superior de Foundation CSS
Ejemplo 2: Este es un ejemplo básico que ilustra el diseño avanzado de la barra superior usando Foundation CSS en una pantalla de tamaño pequeño.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Top Bar Advanced Layout</title> <!-- 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= "//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" /> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> </script> </head> <body> <center> <div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium" style="width: 60%;"> <button class="menu-icon" type="button" data-toggle="responsive-menu"> </button> <div class="title-bar-title">Menu</div> </div> <center> <div class="top-bar" style="width: 60%;" id="responsive-menu"> <div class="top-bar-left"> <ul class="dropdown menu" data-dropdown-menu> <li class="menu-text">Company Name</li> <li> <a href="#">Home</a> </li> <li> <a href="#">Products</a> <ul class="menu vertical"> <li> <a href="#">Mobiles</a> </li> <li> <a href="#">Laptops</a> </li> <li> <a href="#">Tablets</a> </li> </ul> </li> <li> <a href="#">About Us</a> </li> <li> <a href="#">Login</a> </li> </ul> </div> <div class="top-bar-right"> <ul class="menu"> <li> <input type="search" placeholder="Search"> </li> <li> <button type="button" class="button">Search </button> </li> </ul> </div> </div> </center> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Diseño avanzado de la barra superior de Foundation CSS
Referencia: https://get.foundation/sites/docs/top-bar.html#advanced-layout
Publicación traducida automáticamente
Artículo escrito por tpraneeth2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA