Foundation CSS es el marco frontend de CSS que se utiliza para crear sitios web, aplicaciones y correos electrónicos receptivos que funcionan perfectamente en cualquier dispositivo. Está escrito usando HTML, CSS y Javascript y es utilizado por muchas compañías famosas como Amazon, Facebook, eBay, etc. Utiliza paquetes como Grunt y Libsass para una codificación y control rápidos y un compilador Saas para acelerar el desarrollo.
Kitchen Sink tiene los elementos para trabajar en sitios web y aplicaciones. Kitchen Sink Top Bar se utiliza para crear la barra de navegación en la parte superior de nuestra página web.
Clases usadas:
- top-bar: Se utiliza para crear la barra superior en la parte superior de la pantalla.
- top-bar-left: Se utiliza para crear los elementos en el lado izquierdo de la barra superior.
- top-bar-right: Se utiliza para crear los elementos en el lado derecho de la barra superior.
Sintaxis:
<div class="top-bar">
<div class="top-bar-left ||
top-bar-right">
.......
</div>
</div>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de la barra superior del fregadero de la cocina utilizando la clase top-bar y top-bar-left .
HTML
<!DOCTYPE html> <html> <head> <link crossorigin="anonymous" rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <script crossorigin="anonymous" src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Kitchen Sink Top Bar</h3> <div class="top-bar"> <div class="top-bar-left"> <ul class="dropdown menu"> <li class="menu-text">GeeksforGeeks</li> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> </ul> </div> </div> </body> </html>
Producción:
Barra superior izquierda
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso de la barra superior del fregadero de la cocina utilizando la clase top-bar, top-bar-left y top-bar-right .
HTML
<!DOCTYPE html>
<html>
<head>
<link crossorigin="anonymous" rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script crossorigin="anonymous" src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Top Bar</h3>
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">GeeksforGeeks</li>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li class="has-submenu">
<a href="#">Dropdown</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5</a></li>
</ul>
</li>
<li><a href="#">Menu5</a></li>
<li><a href="#">Menu6</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>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Barra superior en ambos lados
Enlace de referencia: https://get.foundation/sites/docs/kitchen-sink.html#top-bar
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA