Fundación CSS
El conmutador de navegación receptivo es útil para alternar la vista de la barra de navegación o el menú en los dispositivos de tamaño pequeño, de modo que el contenido de la barra de navegación sea visible en dispositivos de tamaño pequeño o mediano, lo que ayuda a crear páginas web o aplicaciones web receptivas.
Sintaxis :
<div class="title-bar">
<button class="menu-icon"
type="button">Toggle button
</button>
</div>
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu">
<li> Content </li>
<li> Content </li>
...
</ul>
</div>
</div>
Clase de alternancia de navegación receptiva de Foundation CSS:
- 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.
Atributo de alternancia de navegación receptiva de Foundation CSS:
- data-responsive-toggle : este atributo ayuda a crear la alternancia receptiva que se puede usar para mostrar los datos en los dispositivos de tamaño pequeño.
- data-toggle : este atributo habilita la función de alternancia de datos.
- data-hide-for : este atributo se utiliza para ocultar los datos para el tamaño de pantalla especificado.
Ejemplo : este ejemplo describe el cambio de navegación sensible con menú alineado horizontalmente en Foundation CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Responsive Navigation</title>
<meta name="viewport"
content="width = device-width,
initial-scale = 1" />
<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>
<h2>Foundation CSS Responsive Navigation Toggle</h2>
<div class="title-bar"
data-responsive-toggle="example-menu"
data-hide-for="medium">
<button class="menu-icon"
type="button" data-toggle>
</button>
<div class="title-bar-title">Horizontal Menu</div>
</div>
<div id="example-menu">
<ul class="menu dropdown" data-dropdown-menu>
<li><a href="#">DSA</a></li>
<li><a href="#">Programming Languages</a></li>
<li><a href="#">Placements Course</a></li>
<li><a href="#">Web Technology</a></li>
</ul>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
</body>
</html>
Salida :
Ejemplo : este ejemplo describe el cambio de navegación sensible con menú alineado verticalmente en Foundation CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Responsive Navigation</title>
<meta name="viewport"
content="width = device-width,
initial-scale = 1" />
<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>
<h2>Foundation CSS Responsive Navigation Toggle</h2>
<div class="title-bar"
data-responsive-toggle="example-menu"
data-hide-for="medium">
<button class="menu-icon"
type="button" data-toggle>
</button>
<div class="title-bar-title">Vertical Menu</div>
</div>
<div id="example-menu">
<ul class="menu vertical">
<li>
<a href="#">DSA</a>
</li>
<li>
<a href="#">Programming Languages</a>
</li>
<li>
<a href="#">Placements Course</a>
</li>
<li>
<a href="#">Web Technology</a>
</li>
</ul>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
</body>
</html>
Salida :
Referencia: https://get.foundation/sites/docs/responsive-navigation.html#responsive-toggle
Publicación traducida automáticamente
Artículo escrito por attardeurjita77 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA