Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de sitios web, aplicaciones y correos electrónicos receptivos sorprendentes que parecen increíbles y pueden ser accesibles para cualquier dispositivo. En este artículo, discutiremos las clases de menú receptivas del fregadero de cocina en Foundation CSS.
Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. El menú receptivo del fregadero de cocina se usa para agregar el menú receptivo con alineación horizontal y vertical de los elementos en el sitio web y la vista móvil, respectivamente.
Foundation CSS Kitchen Sink Responsive Menu clases:
- [tamaño]-vertical: esta clase se usa para especificar las alineaciones verticales de los elementos en la pantalla de tamaño dado. Los tamaños de pantalla pueden ser pequeños , medianos y grandes .
- [tamaño]-horizontal: esta clase se usa para especificar las alineaciones verticales de los elementos en la pantalla de tamaño dado. Los tamaños de pantalla pueden ser pequeños , medianos y grandes .
Sintaxis:
<ul class="[size]-vertical
[size]-horizontal menu">
<li>
......
</li>
</ul>
Ejemplo 1: a continuación, se muestra el ejemplo que ilustra el uso del menú receptivo del fregadero de la cocina con clases de menú verticales medianas, horizontales grandes y .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Responsive Menu</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<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>
<h5>Foundation CSS Kitchen Sink Responsive Menu</h5>
<ul class="medium-vertical large-horizontal menu">
<li>
<a href="#">DSA</a>
</li>
<li>
<a href="#">OOP's</a>
</li>
<li>
<a href="#">DBMS</a>
</li>
<li>
<a href="#">OS</a>
</li>
</ul>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Foundation CSS Kitchen Sink Responsivo Menú
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso del menú receptivo del fregadero de la cocina utilizando clases de menú verticales grandes, horizontales medianas y .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Responsive Menu</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<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>
<h5>Foundation CSS Kitchen Sink Responsive Menu</h5>
<ul class="large-vertical medium-horizontal menu">
<li>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220303125025/gfglogo-200x107.png"
alt="gfg">
</li>
<li>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220303124953/gfglogo1-200x200.png"
alt="gfg">
</li>
<li>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220303125025/gfglogo-200x107.png"
alt="gfg">
</li>
</ul>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Foundation CSS Kitchen Sink Responsivo Menú
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#responsive-menu
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA