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 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 posicionamiento desplegable se utiliza para posicionar el menú desplegable. En este artículo, discutiremos cómo colocar el menú desplegable en Foundation CSS.
Clases de posicionamiento desplegable de Foundation CSS:
- top : se utiliza para colocar el menú desplegable en la parte superior del elemento.
- bottom : se utiliza para colocar el menú desplegable en la parte inferior del elemento.
- left : Se utiliza para posicionar el menú desplegable a la izquierda del elemento.
- right : Se utiliza para posicionar el menú desplegable a la derecha del elemento.
Sintaxis:
<div class="dropdown-pane POSITION" data-dropdown> ...... </div>
Ejemplo 1: el siguiente código demuestra el posicionamiento desplegable izquierdo y derecho .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Dropdown Positioning</title>
<!-- 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 style="padding: 1%;">
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Dropdown Positioning</h3>
<button class="button"
type="button"
data-toggle="dropdown-left">
Dropdown Position Left
</button>
<div class="dropdown-pane left"
id="dropdown-left"
data-dropdown>
A Computer Science portal for geeks.
It contains well written, well thought and well
explained computer science and programming articles
</div>
<br> <br> <br>
<button class="button"
type="button"
data-toggle="dropdown-right">
Dropdown Position Right
</button>
<div class="dropdown-pane right"
id="dropdown-right"
data-dropdown>
A Computer Science portal for geeks.
It contains well written, well thought and
well explained computer science and
programming articles
</div>
</center>
<script>
$(document).ready(function() {
$(document).foundation(); })
</script>
</body>
</html>
Producción:
Posicionamiento desplegable de Foundation CSS
Ejemplo 2: el siguiente código muestra la parte superior e inferior del posicionamiento desplegable .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Dropdown Positioning</title>
<!-- 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 style="padding: 1%;">
<center>
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Foundation CSS Dropdown Positioning</h3>
<button class="button"
type="button"
data-toggle="dropdown-top">
Dropdown Position Top
</button>
<div class="dropdown-pane top"
id="dropdown-top"
data-dropdown>
A Computer Science portal for geeks.
It contains well written,
well thought and well explained computer
science and programming articles
</div>
<br>
<button class="button"
type="button"
data-toggle="dropdown-bottom">
Dropdown Position Bottom</button>
<div class="dropdown-pane bottom"
id="dropdown-bottom"
data-dropdown>
A Computer Science portal for geeks.
It contains well written,
well thought and well explained computer
science and programming articles
</div>
</center>
<script>
$(document).ready(function() {
$(document).foundation(); })
</script>
</body>
</html>
Producción:
Posicionamiento desplegable de Foundation CSS
Referencia: https://get.foundation/sites/docs/dropdown.html#positioning
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