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ú desplegable se utiliza para mostrar los elementos del menú como un menú ampliable. Podemos crear el menú desplegable para organizar los elementos de forma sistemática con la ayuda de las clases. Podemos crear un menú desplegable horizontal y vertical. El menú desplegable vertical se usa para crear el menú en dirección vertical y los submenús son automáticamente verticales. En este artículo, discutiremos cómo crear el menú desplegable vertical en Foundation CSS.
Clase de menú desplegable vertical CSS de Foundation:
- vertical : Se utiliza para crear el menú desplegable vertical.
Sintaxis:
<ul class="vertical dropdown menu" data-dropdown-menu> ... </ul>
Ejemplo 1: el siguiente código muestra el menú desplegable vertical con algunos elementos de menú.
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 Vertical Dropdown Menu</h3>
</center>
<ul class="vertical dropdown menu" data-dropdown-menu>
<li><a href="#">Home</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Contact</a></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 muestra el menú desplegable vertical con menú 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 Vertical Dropdown Menu</h3>
</center>
<ul
class="vertical dropdown menu"
data-dropdown-menu
style="max-width: 250px"
>
<li>
<a href="#">Home</a>
<ul class="vertical menu nested">
<li>
<a href="#">Item A</a>
<ul class="vertical menu nested">
<li><a href="#">Item A1</a></li>
<li><a href="#">Item A2</a></li>
</ul>
</li>
<li>
<a href="#">Item B</a>
<ul class="vertical menu nested">
<li><a href="#">Item B1</a></li>
<li><a href="#">Item B2</a></li>
</ul>
</li>
<li><a href="#">Item C</a></li>
</ul>
</li>
<li><a href="#">Search</a></li>
<li>
<a href="#">Contact</a>
<ul class="vertical menu nested">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Enlace de referencia: https://get.foundation/sites/docs/dropdown-menu.html#vertical
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