Foundation CSS es un marco front-end de código abierto que se utiliza para crear sitios web, correos electrónicos o aplicaciones receptivos atractivos de forma rápida y sencilla. ZURB lo lanzó en septiembre de 2011. Numerosas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Esta plataforma, que se asemeja a SaaS, se basa en el marco Bootstrap. Es más único, flexible y complejo. Trabajar con paquetes de módulos también es simple debido a su interfaz de línea de comandos. El marco de correo electrónico crea correos electrónicos HTML que son accesibles en todos los dispositivos y compatibles con dispositivos móviles. Con Foundation for Apps, puede crear aplicaciones web totalmente receptivas.
La navegación flexible incluye una variedad de elementos, como la barra superior, el menú de acordeón, el menú desplegable y el menú básico, que hacen que sea simple y rápido crear y ensamblar la navegación receptiva . De acuerdo con los tamaños de pantalla variados, también permite elegir entre los distintos patrones. El conmutador de navegación sensible es útil para cambiar la vista del menú o la barra de navegación en dispositivos de tamaño pequeño, lo que hace que las páginas web o las aplicaciones web respondan mejor al garantizar que la información de la barra de navegación se pueda ver en estos dispositivos. En este artículo, vamos a ver cómo podemos usar la Alternancia de navegación receptiva con animación , lo que significa que usaremos Motion UItransiciones para activar o desactivar el menú de navegación. No hay clases como tales para aplicar la navegación receptiva con alternar, solo necesitamos agregar sus atributos.
Foundation CSS Responsive Navigation Alternar con clases de animación:
- menu-icon : esta clase se utiliza para crear un botón de icono de alternancia.
- top-bar : esta clase se utiliza para crear la barra de navegación que contiene los diversos enlaces.
- menú : esta clase se utiliza para crear un menú para alternar el botón.
- menú desplegable : esta clase se utiliza para hacer el menú con la lista desplegable.
Foundation CSS Responsive Navigation Toggle con atributos de animación:
- data-responsive-toggle: esta clase se agrega al componente que se mostrará cuando los datos en el menú de navegación principal estén ocultos. Este atributo toma como valor el id del componente del menú.
- data-hide-for: esta clase se agrega al componente que es la versión receptiva del menú de navegación, este atributo se usa para especificar en qué tamaño de pantalla se ocultará este componente.
- data-animate: este atributo se agrega al contenedor que tiene el menú de navegación principal. Este atributo toma el valor en formato data-animate=”someAnimationIn someAnimationOut”. Los dos valores son generalmente las diferentes transiciones de la biblioteca de Motion UI .
Sintaxis:
<div class="title-bar"
data-responsive-toggle="example-animated-menu"
data-hide-for="..">
<button class="menu-icon" type="button"
data-toggle></button>
<div class="title-bar-title"> ... </div>
</div>
<div class="" id="example-animated-menu"
data-animate="someAnimationIn someAnimationOut">
...
</div>
Ejemplo 1: el siguiente código muestra cómo agregar un botón de navegación receptivo con transiciones de bisagra hacia adentro desde arriba y giro hacia afuera . Aquí, la barra de título receptiva se oculta cuando el tamaño de la pantalla es grande .
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css" />
<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>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js">
</script>
</head>
<body>
<div class="title-bar" data-responsive-toggle="example-animated-menu"
data-hide-for="large">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="example-animated-menu"
data-animate="hinge-in-from-top spin-out">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">GeeksforGeeks</li>
<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>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>
Foundation CSS Responsive Navigation
Toggle with animation
</h3>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código muestra cómo agregar un interruptor de navegación receptivo con transiciones de aumento gradual y aumento gradual . Aquí, la barra de título receptiva se oculta cuando el tamaño de la pantalla es medio o superior .
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css" />
<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>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js">
</script>
</head>
<body>
<div class="title-bar"
data-responsive-toggle="example-animated-menu"
data-hide-for="medium">
<button class="menu-icon" type="button"
data-toggle>
</button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="example-animated-menu"
data-animate="fade-in scale-out-up">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">GeeksforGeeks</li>
<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>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>
Foundation CSS Responsive Navigation
Toggle with animation
</h3>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/responsive-navigation.html#responsive-toggle-with-animation
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA