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 menú desplegable se revela cuando hacemos clic en el elemento o pasamos el cursor sobre él. En este artículo, discutiremos los conceptos básicos de Dropdown en Foundation CSS.
Clase de conceptos básicos desplegables de Foundation CSS:
- dropdown-pane: esta clase se utiliza para crear el panel desplegable.
Sintaxis:
<div class="dropdown-pane" data-dropdown> ..... </div>
Ejemplo 1: El siguiente código demuestra los conceptos básicos de menú desplegable de Foundation CSS cuando hacemos clic en el elemento.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Dropdown Basics</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> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h3> Foundation CSS Dropdown Basics </h3> <button class="button secondary" type="button" data-toggle="dropdownBasic"> Click Dropdown </button> <div class="dropdown-pane" id="dropdownBasic" data-dropdown data-auto-focus="true"> <strong> GeeksforGeeks: </strong> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. </p> </div> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Conceptos básicos del menú desplegable de Foundation CSS
Ejemplo 2: el siguiente código demuestra los conceptos básicos de menú desplegable de Foundation CSS cuando pasamos el cursor sobre el elemento .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Dropdown Basics</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> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h3> Foundation CSS Dropdown Basics </h3> <button class="button alert" type="button" data-toggle="dropdownBasic"> Hover Dropdown </button> <div class="dropdown-pane" id="dropdownBasic" data-dropdown data-hover="true" data-hover-pane="true"> <strong> GeeksforGeeks: </strong> <label> Hover Dropdown <input type="text" placeholder="Computer Science portal"> </label> </div> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Conceptos básicos del menú desplegable de Foundation CSS
Referencia: https://get.foundation/sites/docs/dropdown.html#basics
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