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.
Foundation CSS Dropdown se usa para mostrar el contenido cuando hacemos clic en el elemento. Podemos poner cualquier tipo de contenido en el menú desplegable y acceder a él haciendo clic en el elemento. El menú desplegable se revela cuando hacemos clic en el elemento o pasamos el cursor sobre él. También podemos posicionar nuestro menú desplegable como arriba, abajo, izquierda y derecha usando las clases de posicionamiento del menú desplegable.
En este artículo, veremos cómo crear el menú desplegable en Foundation CSS.
Clases desplegables de Foundation CSS:
- Conceptos básicos : crearemos el menú desplegable de conceptos básicos.
- Posicionamiento : Crearemos el desplegable para posicionar el desplegable.
- Posicionamiento explícito : se utiliza para establecer tanto la posición como la alineación del cuadro.
Sintaxis:
<div class="dropdown-pane" data-dropdown> ... </div>
Ejemplo 1: el siguiente código demuestra el menú desplegable Foundation CSS cuando hacemos clic en el elemento o pasamos el mouse sobre él.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Foundation CSS Dropdown </title>
<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>
<h2 style="color:green;"> GeeksforGeeks </h2>
<h3> Foundation CSS Dropdown </h3>
<button class="button" type="button"
data-toggle="dropdown1">
Dropdown Click
</button>
<div class="dropdown-pane" id="dropdown1"
data-dropdown data-auto-focus="true">
<strong>GeeksforGeeks:</strong>
<p>A Computer Science portal for geeks.</p>
</div>
<button class="button" type="button"
data-toggle="dropdown2">
Dropdown Hover
</button>
<div class="dropdown-pane" id="dropdown2"
data-dropdown data-hover="true"
data-hover-pane="true">
<p>A Computer Science portal for geeks.</p>
</div>
</center>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Conceptos básicos del menú desplegable de Foundation CSS
Ejemplo 2: El siguiente código demuestra las posiciones del menú desplegable de Foundation CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Foundation CSS Dropdown </title>
<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>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<h3> Foundation CSS Dropdown </h3>
<button class="button" type="button"
data-toggle="dropdown1">
Dropdown Left
</button>
<div class="dropdown-pane left"
id="dropdown1" data-dropdown>
<strong>GeeksforGeeks</strong>
</div> <br>
<button class="button" type="button"
data-toggle="dropdown2">
Dropdown Right
</button>
<div class="dropdown-pane right"
id="dropdown2" data-dropdown>
<strong>GeeksforGeeks</strong>
</div><br>
<button class="button" type="button"
data-toggle="dropdown3">
Dropdown Bottom
</button>
<div class="dropdown-pane bottom"
id="dropdown3" data-dropdown>
<strong>GeeksforGeeks</strong>
</div><br>
<button class="button" type="button"
data-toggle="dropdown4">
Dropdown Top
</button>
<div class="dropdown-pane top"
id="dropdown4" data-dropdown>
<strong>GeeksforGeeks</strong>
</div>
</center>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Posiciones desplegables de Foundation CSS
Ejemplo 3: el siguiente código muestra las posiciones explícitas superior e inferior del menú desplegable.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Foundation CSS Dropdown </title>
<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>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Dropdown</h3>
<button class="button" type="button"
data-toggle="bottom-left">
Bottom Left
</button>
<div class="dropdown-pane" data-position="bottom"
data-alignment="left"
id="bottom-left" data-dropdown>
<strong>GeeksforGeeks</strong>
</div>
<button class="button" type="button"
data-toggle="bottom-center">
Bottom Center
</button>
<div class="dropdown-pane" data-position="bottom"
data-alignment="center" id="bottom-center"
data-dropdown>
<strong>GeeksforGeeks</strong>
</div>
<button class="button" type="button"
data-toggle="bottom-right">
Bottom Right
</button>
<div class="dropdown-pane" data-position="bottom"
data-alignment="right" id="bottom-right"
data-dropdown>
<strong>GeeksforGeeks</strong>
</div><br><br><br><br>
<button class="button" type="button"
data-toggle="top-left">
Top Left
</button>
<div class="dropdown-pane" data-position="top"
data-alignment="left" id="top-left"
data-dropdown>
<strong>GeeksforGeeks</strong>
</div>
<button class="button" type="button"
data-toggle="top-center">
Top Center
</button>
<div class="dropdown-pane" data-position="top"
data-alignment="center" id="top-center"
data-dropdown>
<strong>GeeksforGeeks</strong>
</div>
<button class="button" type="button"
data-toggle="top-right">
Top Right
</button>
<div class="dropdown-pane" data-position="top"
data-alignment="right" id="top-right"
data-dropdown>
<strong>GeeksforGeeks</strong>
</div>
</center>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Desplegable Posiciones explícitas superior e inferior
Ejemplo 4: el siguiente código demuestra las posiciones explícitas desplegables izquierda y derecha.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Foundation CSS Dropdown </title>
<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>
<h2 style="color:green;"> GeeksforGeeks </h2>
<h3> Foundation CSS Dropdown </h3>
<button class="button" type="button"
data-toggle="left-top">
Left Top
</button>
<div class="dropdown-pane" data-position="left"
data-alignment="top" id="left-top"
data-dropdown>
<strong> GeeksforGeeks </strong>
</div>
<button class="button" type="button"
data-toggle="right-top">
Right Top
</button>
<div class="dropdown-pane" data-position="right"
data-alignment="top" id="right-top"
data-dropdown>
<strong> GeeksforGeeks </strong>
</div><br><br>
<button class="button" type="button"
data-toggle="left-center">
Left Center
</button>
<div class="dropdown-pane" data-position="left"
data-alignment="center" id="left-center"
data-dropdown>
<strong> GeeksforGeeks </strong>
</div>
<button class="button" type="button"
data-toggle="right-center">
Right Center
</button>
<div class="dropdown-pane" data-position="right"
data-alignment="center" id="right-center"
data-dropdown>
<strong> GeeksforGeeks </strong>
</div><br><br>
<button class="button" type="button"
data-toggle="left-bottom">
Left Bottom
</button>
<div class="dropdown-pane" data-position="left"
data-alignment="bottom" id="left-bottom"
data-dropdown>
<strong> GeeksforGeeks </strong>
</div>
<button class="button" type="button"
data-toggle="right-bottom">
Right Bottom
</button>
<div class="dropdown-pane" data-position="right"
data-alignment="bottom" id="right-bottom"
data-dropdown>
<strong> GeeksforGeeks </strong>
</div>
</center>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Posiciones explícitas desplegables izquierda y derecha
Referencia: https://get.foundation/sites/docs/dropdown.html
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