Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Este marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas.
Accordion Menu se utiliza para convertir el menú vertical básico en un menú ampliable con la ayuda del complemento Accordion Menu. Cuando queramos convertir el menú básico en el menú de acordeón, agregue el atributo data-accordion-menu . En este artículo, discutiremos los conceptos básicos del Menú Acordeón en Foundation CSS.
Clases básicas del menú de acordeón Foundation CSS:
- menu : Se utiliza para crear el menú básico.
- acordeón-menú : Se utiliza para cambiar el menú básico vertical en el menú de acordeón.
Sintaxis:
<ul class="menu accordion-menu" data-accordion-menu> ...... </ul>
Ejemplo 1: El siguiente código demuestra los conceptos básicos del menú de acordeón.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<!-- 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 Basics</h3>
</center>
<ul class="vertical menu accordion-menu"
data-accordion-menu>
<li>
<a href="#">Home</a>
<ul class="menu vertical nested">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</li>
<li><a href="#">Explore</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="#">About us</a></li>
</ul>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra los conceptos básicos del menú de acordeón con más menús y submenús .
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<!-- 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 Basics</h3>
</center>
<ul class="vertical menu accordion-menu" data-accordion-menu>
<li>
<a href="#">Home</a>
<ul class="menu vertical nested">
<li><a href="#">Item 1</a>
<ul class="menu vertical nested">
<li><a href="#">Item 1A</a>
<ul class="menu vertical nested">
<li><a href="#">Item 1A 1</a></li>
<li><a href="#">Item 1A 2</a></li>
</ul>
</li>
<li><a href="#">Item 1B</a></li>
<li><a href="#">Item 1C</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
</ul>
</li>
<li><a href="#">Explore</a>
<ul class="menu vertical nested">
<li><a href="#">Item A</a>
<ul class="menu vertical nested">
<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="#">About us</a></li>
</ul>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Enlace de referencia: https://get.foundation/sites/docs/accordion-menu.html#basics
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