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 hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Un menú en Foundation CSS es una lista de navegación que contiene los diferentes componentes que redirigen a las diversas páginas vinculadas en los sitios web o aplicaciones web.
Los íconos que conocemos son símbolos y cada uno tiene un significado especial y un propósito especial. Se puede utilizar un icono en lugar de texto.
Iconos de menú de Foundation CSS Clases:
- menu: Esta clase se utiliza para crear un menú de navegación.
- iconos: esta clase especifica que el menú contiene iconos
- icon-right: esta clase especifica que el icono está a la derecha del texto del menú.
- icon-left: esta clase especifica que el icono está a la izquierda del texto del menú.
- icon-top: esta clase especifica que el icono está encima del texto del menú.
- icon-bottom: esta clase especifica que el icono está en la parte inferior del texto del menú.
- vertical: esta clase se utiliza para crear un menú alineado verticalmente.
- anidado: esta clase se utiliza para crear un menú anidado.
- fi-list: esta clase se utiliza para crear un icono de lista.
- fi-minus: esta clase se utiliza para crear un icono menos.
Sintaxis:
<ul class="menu icons icon-top"> <li><i class="fi-list"></i>....</li> .... </ul>
Ejemplo 1: este es un ejemplo básico que ilustra las diferentes direcciones de los íconos de menú creados con Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Menu Icons</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.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>
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Foundation CSS Menu Icons</strong>
<br>
<p>Icon Top</p>
<ul class="menu icons icon-top">
<li><a href="#"><i class="fi-list"></i>
<span>Data Structures</span>
</a>
</li>
<li><a href="#">
<i class="fi-list"></i>
<span>Algorithms</span>
</a>
</li>
<li><a href="#">
<i class="fi-list"></i>
<span>Interview Preparation</span>
</a>
</li>
</ul>
<p>Icon Bottom</p>
<ul class="menu icons icon-bottom">
<li><a href="#">Data Structures
<i class="fi-list"></i></a></li>
<li><a href="#">Algorithms
<i class="fi-list"></i></a></li>
<li><a href="#">Interview Preparation
<i class="fi-list"></i></a></li>
</ul>
<p>Icon Left</p>
<ul class="menu icons icon-left">
<li><a href="#">
<i class="fi-minus"></i>
<span>Data Structures</span></a>
</li>
<li><a href="#"><i class="fi-minus"> </i>
<span>Algorithms</span></a></li>
<li><a href="#"><i class="fi-minus"></i>
<span>Interview Preparation</span></a>
</li>
</ul>
<p>Icon Right</p>
<ul class="menu icons icon-right">
<li><a href="#"><span>Data Structures</span>
<i class="fi-minus"></i></a></li>
<li><a href="#"><span>Algorithms</span>
<i class="fi-minus"></i></a></li>
<li><a href="#"><span>Interview Preparation</span>
<i class="fi-minus"></i></a></li>
</ul>
<script>
$(document).foundation();
</script>
</body>
</html>
Producción:
Ejemplo 2: Este es un ejemplo básico que ilustra iconos de menú anidados creados con Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Menu Icons</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.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>
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Foundation CSS Menu Icons</strong>
<br>
<ul class="menu vertical icons icon-top">
<li><a href="#"><i class="fi-list"></i>
<span>Data Structures</span></a></li>
<ul class="nested vertical menu icons icon-right">
<li><a href="#"><span>Linked List</span>
<i class="fi-minus"></i></a></li>
<li><a href="#"><span>Stacks</span>
<i class="fi-minus"></i></a></li>
<li><a href="#"><span>Queues</span>
<i class="fi-minus"></i></a></li>
</ul>
<li><a href="#"><i class="fi-list"></i>
<span>Algorithms</span></a></li>
<ul class="nested vertical menu icons icon-left">
<li><a href="#"><i class="fi-minus"></i>
<span>Binary Search</span></a></li>
<li><a href="#"><i class="fi-minus"></i>
<span>Merge Sort</span></a></li>
<li><a href="#"><i class="fi-minus"></i>
<span>Dijkstra Algorithm</span></a></li>
</ul>
<li><a href="#"><i class="fi-list"></i>
<span>Interview Preparation</span></a></li>
</ul>
<script>
$(document).foundation();
</script>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/menu.html#icons
Publicación traducida automáticamente
Artículo escrito por tpraneeth2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA