Foundation CSS Navigation se usa principalmente para el comportamiento diferente de la navegación del cursor en cada elemento. por ej. Foundation CSS Magellan se utiliza para saltar al objetivo dado cuando se hace clic en el enlace. Se utiliza cuando queremos saltar a alguna sección específica directamente sin desplazarnos hacia abajo en la página web.
La lista completa de Foundation CSS Navigation se enumeran a continuación:
- Menú CSS básico
- Menú básico de CSS básico
- Alineación de elementos de menú de Foundation CSS
- Menú CSS básico Menú vertical
- Menú CSS básico Estilo simple
- Estilo anidado del menú Foundation CSS
- Estado activo del menú Foundation CSS
- Texto del menú CSS básico
- Iconos de menú CSS básicos
- Navegación fija del menú CSS de Foundation
- Base CSS Menú Sass Referencia
- Menú desplegable de CSS básico
- Menú desplegable horizontal de Foundation CSS
- Menú desplegable vertical de Foundation CSS
- Menú desplegable de navegación Sticky CSS de Foundation
- Menú desplegable de Foundation CSS Referencia de Sass
- Referencia de JavaScript del menú desplegable de Foundation CSS
- Menú detallado de CSS básico
- Conceptos básicos del menú detallado de Foundation CSS
- Menú detallado de Foundation CSS autoHeight
- Menú detallado de Foundation CSS ScrollTop
- Estilo personalizado del menú detallado de Foundation CSS
- Referencia de JavaScript del menú detallado de CSS de Foundation
- Menú Acordeón Foundation CSS
- Conceptos básicos del menú Acordeón Foundation CSS
- Foundation CSS Acordeón Alternar menú
- Foundation CSS Accordion Menú Sass Referencia
- Base CSS Menú Acordeón Referencia de JavaScript
- Barra superior CSS de la base
- Conceptos básicos de la barra superior Foundation CSS
- Diseño avanzado de la barra superior de Foundation CSS
- Apilamiento de la barra superior Foundation CSS
- Navegación pegajosa de la barra superior de Foundation CSS
- Base CSS Top Bar Sass Referencia
- Navegación receptiva CSS básica
- Menú de navegación responsivo de Foundation CSS
- Cambio de navegación receptivo de Foundation CSS
- Foundation CSS Responsive Navigation Alternar con animación
- Referencia de JavaScript de navegación receptiva de CSS de Foundation
- Fundación CSS Magallanes
- Fundación CSS Magallanes Instalación
- Fundación CSS Magallanes Navegación
- Historial del navegador Foundation CSS Magellan
- Base CSS Referencia de JavaScript de Magellan
- Paginación CSS básica
- Fundamentos básicos de paginación CSS
- Foundation CSS Paginación centrada
- Fundación CSS Paginación Sass Referencia
- Migas de pan de CSS de base
- Fundación CSS Breadcrumbs Sass Referencia
El siguiente ejemplo le dará una breve idea sobre la navegación de Foundation CSS:
Ejemplo:
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:
Referencia completa de navegación CSS de Foundation
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA