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.
El menú acordeón se usa para convertir el menú vertical básico en el menú acordeón expandible. Accordion Submenu Toggle se usa para hacer que el elemento principal tenga su enlace y permite que el submenú se abra o se cierre. Significa que podemos tener el enlace así como el menú Acordeón del mismo elemento principal. Cuando alternamos el elemento, se abrirá el hipervínculo y si hacemos clic en el icono desplegable, se abrirá el submenú. Usamos la clase de menú acordeón y el atributo data-submenu-toggle=”true” para que funcione correctamente. En este artículo, discutiremos cómo crear el conmutador de submenú de acordeón en Foundation CSS.
Foundation CSS Accordion Submenu Alternar clase:
- acordeon-menu: Se utiliza para crear el menú acordeón.
Sintaxis:
<ul class="vertical menu accordion-menu"
data-accordion-menu data-submenu-toggle="true">
<li>
<a href="URL">.....</a>
<ul class="menu vertical nested">
......
</ul>
</li>
</ul>
Ejemplo 1: el siguiente código muestra el cambio de submenú 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 Submenu Toggle</h3>
</center>
<ul class="vertical menu accordion-menu"
data-accordion-menu data-submenu-toggle="true">
<li>
<a href="https://www.geeksforgeeks.org/">
Open GeeksforGeeks, or open dropdown →</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="#">Home</a>
<ul class="menu vertical nested">
<li><a href="#">Item A</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra el cambio de submenú de acordeón con menús y submenús alternar.
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 Submenu Toggle</h3>
</center>
<ul class="vertical menu accordion-menu"
data-accordion-menu data-submenu-toggle="true">
<li>
<a href="https://www.geeksforgeeks.org/" target="_blank">
Open GeeksforGeeks, or open dropdown →</a>
<ul class="menu vertical nested">
<li><a href="#">Item 1</a></li>
<li><a href="">Item 2</a>
<ul class="vertical menu accordion-menu nested"
data-accordion-menu data-submenu-toggle="true">
<li><a href="#">Item 1</a></li>
<li><a href="https://practice.geeksforgeeks.org/"
target="_blank">
Open GFG or dropdown →
</a>
<ul class="menu vertical nested">
<li><a href="#">Item 2A</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li>
<a href="#">Home</a>
<ul class="menu vertical nested">
<li><a href="#">Item A</a></li>
<li><a href="#">Item A</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/accordion-menu.html#submenu-toggle
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