Fundación CSS
Drilldown Menu es útil para transformar una serie de listas anidadas en un menú desplegable vertical para que la altura del menú se pueda adaptar a todos los tamaños de dispositivos. Esto toma la altura del menú más alto en la jerarquía. AutoHeight se puede usar para ajustar la altura de la página web con respecto a la ventana gráfica para que el contenido de la página web sea visible para dispositivos de todos los tamaños .
Clase de menú detallado de Foundation CSS:
- desglose de menú vertical : esta clase se utiliza para crear el menú de desglose orientado verticalmente.
Atributo del menú detallado de Foundation CSS:
- data-drilldown : este atributo es útil para alinear los datos que se desglosan para abrir de manera vertical.
- data-auto-height : este atributo se puede usar para establecer la altura del menú, para representar el contenido del menú en todos los tamaños de dispositivos.
- data-animate-height : este atributo se usa para animar el ajuste de altura de los datos del menú.
Sintaxis:
<ul class="vertical menu drilldown" data-drilldown data-auto-height="true">
Content
</ul>
Ejemplo 1: En este ejemplo, el texto debajo del menú nos ayuda a comprender cómo funciona la altura automática. A medida que cambia la altura del menú, el texto de abajo se mueve hacia arriba y hacia abajo en consecuencia, ya que la altura automática se establece en verdadero.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Drilldown Menu autoHeight</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous" /> </head> <body> <center> <h2 style="color: green">GeeksforGeeks</h2> <h4>Foundation CSS Drilldown Menu autoHeight</h4> </center> <ul class="menu vertical" data-drilldown data-auto-height="true" data-animate-height="true"> <li> <a href="#">Courses</a> <ul class="menu vertical nested"> <li> <a href="#">DSA</a> </li> <li> <a href="#">GATE</a> </li> <li> <a href="#">Datascience</a> </li> <li> <a href="#">Full stack development</a> </li> </ul> </li> <li> <a href="#">Programming languages</a> <ul class="menu vertical nested"> <li> <a href="#">Python</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">Javascript</a> </li> <li> <a href="#">R</a> </li> <li> <a href="#">php</a> </li> </ul> </li> <li> <a href="#">Job</a> </li> <li> <a href="#">Login</a> </li> </ul> <div class="row"> <div class="columns"> <p> Foundation CSS is an open-source responsive front-end framework that includes a responsive grid, as well as HTML and CSS UI components, templates, and code snippets for typography, forms, buttons, navigation, and other interface elements, as well as optional JavaScript extensions. ZURB formerly maintained Foundation, which is an open-source project. Volunteers have been maintaining the Foundation since 2019. </p> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> <script type="text/javascript"> $(document).foundation(); </script> </body> </html>
Producción:
Establecer la altura automática en verdadero
Ejemplo 2 : Este ejemplo describe el AutoHeight del menú Drilldown sin establecer el autoHeight en verdadero en Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Drilldown Menu autoHeight</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous" /> </head> <body> <center> <h2 style="color: green">GeeksforGeeks</h2> <h4>Foundation CSS Drilldown Menu autoHeight</h4> </center> <ul class="menu vertical" data-drilldown data-animate-height="true"> <li> <a href="#">Courses</a> <ul class="menu vertical nested"> <li> <a href="#">DSA</a> </li> <li> <a href="#">GATE</a> </li> <li> <a href="#">Datascience</a> </li> <li> <a href="#">Full stack development</a> </li> </ul> </li> <li> <a href="#">Programming languages</a> <ul class="menu vertical nested"> <li> <a href="#">Python</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">Javascript</a> </li> <li> <a href="#">R</a> </li> <li> <a href="#">php</a> </li> </ul> </li> <li> <a href="#">Job</a> </li> <li> <a href="#">Login</a> </li> </ul> <div class="row"> <div class="columns"> <p> Foundation CSS is an open-source responsive front-end framework that includes a responsive grid, as well as HTML and CSS UI components, templates, and code snippets for typography, forms, buttons, navigation, and other interface elements, as well as optional JavaScript extensions. ZURB formerly maintained Foundation, which is an open-source project. Volunteers have been maintaining the Foundation since 2019. </p> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> <script> $(document).foundation(); </script> </body> </html>
Producción:
Sin establecer el autoHeight en verdadero
Referencia: https://get.foundation/sites/docs/drilldown-menu.html#autoheight
Publicación traducida automáticamente
Artículo escrito por isitapol2002 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA