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.
El menú desplegable se usa para mostrar el menú como un menú expandido con algunos elementos. Podemos crear un menú desplegable horizontal y vertical para organizar nuestros artículos. El menú desplegable horizontal se usa para crear el menú en la dirección horizontal y los submenús se alinean verticalmente automáticamente. En este artículo, aprenderemos el menú desplegable horizontal en Foundation CSS.
Clase de menú desplegable horizontal de Foundation CSS:
- menú: Esta clase se utiliza para crear el menú con la lista de elementos. El menú es de tipo horizontal por defecto.
Sintaxis:
<ul class="dropdown menu" data-dropdown-menu>
.....
</ul>
Ejemplo 1: el siguiente código muestra el menú desplegable horizontal con algunos elementos .
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" />
<!-- 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">
</script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Foundation CSS Horizontal Dropdown Menu</h3>
<ul class="dropdown menu"
data-dropdown-menu>
<li><a href="">GFG 1</a></li>
<li><a href="">GFG 2</a></li>
<li><a href="">GFG 3</a></li>
<li><a href="">GFG 4</a></li>
<li><a href="">GFG 5</a></li>
<li><a href="">GFG 6</a></li>
</ul>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código muestra el menú desplegable horizontal con 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" />
<!-- 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">
</script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Foundation CSS Horizontal Dropdown Menu</h3>
<ul class="dropdown menu"
data-dropdown-menu>
<li>
<a href="#">GFG 1</a>
<ul class="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</li>
<li><a href="#">GFG 2</a>
<ul class="menu">
<li><a href="#">item a</a>
<ul class="menu">
<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="#">GFG 3</a></li>
</ul>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/dropdown-menu.html#horizontal
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA