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.
Foundation CSS Accordion Menu se utiliza para convertir el menú vertical básico en un menú de acordeón ampliable. Para convertir el menú en un menú de acordeón, se utiliza el atributo data-accordion-menu . En este artículo, discutiremos el Menú Acordeón Foundation CSS.
Clase de menú de acordeón Foundation CSS:
- acordeón-menú: Esta clase se utiliza para convertir el menú básico en el menú de acordeón.
Sintaxis:
<ul class="menu accordion-menu"
data-accordion-menu>
....
</ul>
Ejemplo 1: El siguiente código demuestra el menú de acordeón Foundation CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Foundation CSS Accordion Menu </title>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
<!-- Compressed JavaScript -->
<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"
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3> Foundation CSS Accordion Menu </h3>
</center>
<ul class="vertical menu accordion-menu"
data-accordion-menu>
<li>
<a href="#"> GeeksforGeeks 1 </a>
<ul class="menu vertical nested">
<li><a href="#"> GFG 1A</a></li>
<li><a href="#">GFG 1B</a></li>
</ul>
</li>
<li><a href="#"> GeeksforGeeks 2 </a></li>
<li><a href="#"> GeeksforGeeks 3 </a></li>
</ul>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Menú Acordeón Foundation CSS
Ejemplo 2: El siguiente código demuestra el menú de acordeón de CSS de Foundation con menú y submenús .
HTML
<!DOCTYPE html>
<html>
<head>
<title> Foundation CSS Accordion Menu </title>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
<!-- Compressed JavaScript -->
<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"
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3> Foundation CSS Accordion Menu </h3>
</center>
<ul class="vertical menu accordion-menu"
data-accordion-menu>
<li>
<a href="#"> GeeksforGeeks 1 </a>
<ul class="menu vertical nested">
<li><a href="#"> GFG 1A</a></li>
<li><a href="#">GFG 1B</a>
<ul class="menu vertical nested">
<li><a href="#"> GFG 1B-1</a></li>
<li><a href="#">GFG 1B-2</a></li>
</ul>
</li>
<li><a href="#">GFG 1B</a></li>
</ul>
</li>
<li><a href="#"> GeeksforGeeks 2 </a>
<ul class="menu vertical nested">
<li><a href="#"> GFG 2-A</a></li>
<li><a href="#">GFG 2-B</a></li>
</ul>
</li>
<li><a href="#"> GeeksforGeeks 3 </a></li>
</ul>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Menú Acordeón Foundation CSS
Referencia: https://get.foundation/sites/docs/accordion-menu.html
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA