Foundation CSS es el marco CSS front-end gratuito y de código abierto que se utiliza para crear sitios web, aplicaciones y correos electrónicos hermosos y con capacidad de respuesta que funcionan en cualquier tipo de dispositivo. Está escrito usando HTML, CSS y Javascript. Es utilizado por muchas empresas como Amazon, Facebook, Disney, etc. Utiliza el compilador Saas para un desarrollo más rápido y utiliza paquetes como Grunt y Libsass para una codificación y control rápidos.
Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. Accordion Menu es el menú plegable horizontal o vertical con algunos efectos. Este menú se puede crear horizontal o verticalmente y los elementos del menú se pueden organizar de manera horizontal o vertical.
Clases de menú de acordeón de fregadero de cocina Foundation CSS:
- menu : Esta clase se utiliza para crear el menú.
- vertical : esta clase se utiliza para crear el menú vertical.
- horizontal : esta clase se utiliza para crear el menú horizontal.
Sintaxis:
<ul class="vertical menu" data-accordion-menu>
<li>
<a href="#">Menu 1/a>
<ul class="menu vertical nested is-active">
<li>
<a href="#">sub-item 1</a>
</li>
<li><a href="#">sub-item 2</a></li>
<li><a href="#">sub-item 3</a></li>
</ul>
</li>
</ul>
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Accordion Menu</title>
<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/font-awesome/4.7.0/css/font-awesome.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.7.4/dist/js/foundation.min.js">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Accordion Menu</h3>
<ul class="vertical menu" data-accordion-menu>
<li>
<a href="#">Menu 1</a>
<ul class="menu vertical nested is-active">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li>
<a href="#0">Menu 2</a>
<ul class="menu vertical nested">
<li><a href="#">Item A</a></li>
<li><a href="#">Item B</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
</ul>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Foundation CSS Fregadero de cocina Menú acordeón
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Accordion Menu</title>
<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/font-awesome/4.7.0/css/font-awesome.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.7.4/dist/js/foundation.min.js">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Accordion Menu</h3>
<ul class="horizontal menu" data-accordion-menu>
<li>
<a href="#">Menu 1</a>
<ul class="menu horizontal nested is-active">
<li><a href="#">Item 1</a>
<ul class="menu horizontal nested">
<li><a href="#">sub-item 1A</a></li>
<li><a href="#">sub-item 1B</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li>
<a href="#0">Menu 2</a>
<ul class="menu horizontal nested">
<li><a href="#">Item A</a></li>
<li><a href="#">Item B</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
</ul>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Foundation CSS Fregadero de cocina Menú acordeón
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#accordion-menu
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA