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.
El menú de navegación Responsive en Foundation CSS es una barra de navegación para sitios web y aplicaciones cuyo tamaño cambia según el tamaño de la pantalla.
Clases de menú de navegación receptiva de Foundation CSS:
- menú desplegable: estas clases se utilizan para crear un menú desplegable para elementos en la barra superior.
- vertical: estas clases se utilizan para crear un menú de navegación vertical.
Sintaxis:
<ul class="menu Navigation-Menu-Classes">
....
</ul>
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.js">
</script>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Responsive Navigation menu</h3>
<ul class="menu dropdown"
data-responsive-menu="drilldown medium-dropdown">
<li>
<a href="#">Bike</a>
<ul class="menu">
<li><a href="#">Bajaj</a></li>
<li><a href="#">Suzuki</a></li>
<li>
<a href="#">Honda</a>
<ul class="menu">
<li><a href="#">Activa</a></li>
<li><a href="#">Dio</a></li>
<li><a href="#">Passion</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Car</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Menú de navegación responsivo de Foundation CSS
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.js">
</script>
</head>
<body style="padding: 10px">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Responsive Vertical Menu</h3>
<ul class="menu vertical">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Service</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Menú de navegación responsivo de Foundation CSS
Referencia: https://get.foundation/sites/docs/responsive-navigation.html
Publicación traducida automáticamente
Artículo escrito por attardeurjita77 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA