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.
Se puede usar una barra superior para crear una barra de navegación que puede contener 2 secciones, es decir, la sección del lado izquierdo que contiene el logotipo con algunos otros componentes y la sección del lado derecho contiene los detalles de registro/inicio de sesión, etc. Para los dispositivos de tamaño pequeño, se pueden apilar unos encima de otros. Además, puede incluir el menú desplegable, que puede heredar el color de fondo de la barra superior, junto con un campo de entrada de texto y un botón de acción.
Clases de 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 de él.
- menú desplegable: esta clase configura un menú desplegable para el contenedor del menú.
- vertical: Esta clase crea un menú vertical.
Sintaxis:
<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>
Ejemplo 1: Este es un ejemplo básico que ilustra la barra superior usando Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS TopBar Basics</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="top-bar" style="width: 60%;"> <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="#">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> <script> $(document).foundation(); </script> </body> </html>
Producción:
Barra superior de Foundation CSS.
Ejemplo 2: este es un ejemplo más complejo que ilustra la barra superior anidada usando Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Top Bar Basics</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="top-bar" style="width: 60%;"> <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> <script> $(document).foundation(); </script> </body> </html>
Producción:
Conceptos básicos de la barra superior Foundation CSS
Referencia: https://get.foundation/sites/docs/top-bar.html#basics
Publicación traducida automáticamente
Artículo escrito por tpraneeth2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA