Foundation Barra de navegación superior
Coloca la barra de navegación superior en el encabezado de la página:
Ejemplo
<ul class="title-area">
<li class="name">
<!-- Si no necesitas el título o el icono, puedes eliminarlo -->
<h1><a href="#">WebSiteName</a></h1>
</li>
<!-- Botón plegable en pantallas pequeñas: Elimina.menu-iconla clase, puedes eliminar el icono.
Si solo necesitas mostrar una imagen, puedes eliminar el texto "Menu"
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</section>
</nav>
<!-- Inicializar Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Pruébalo »
Análisis del ejemplo
Usa<nav class="top-bar" data-topbar>Crea una barra de herramientas estándar..title-areaLa clase define el área del logotipo del sitio (debe colocarse dentro deli.name). Cuando la pantalla se hace más pequeña, verás un botón "menu". El menú de Foundation se pliega y expande automáticamente según el tamaño de la pantalla:
En pantallas pequeñas, muchas opciones se ocultan debido al tamaño.li.toggle-topbar menu.iconLa clase crea un botón de menú; al hacer clic en él se muestran las opciones ocultas.
Consejo:Redimensiona la ventana del navegador para ver el efecto.
.top-bar-sectionDefine la parte de enlaces de la navegación..leftLa clase especifica que los enlaces estén alineados a la izquierda..activeLa clase se usa para mostrar el elemento seleccionado, con fondo azul.
Consejo:Si deseas alinear a la derecha los enlaces de navegación, puedes.leftmodificar a.right :
Puedes configurar la alineación a la izquierda y a la derecha al mismo tiempo:
Ejemplo
<ul class="left">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="right">
<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
</ul>
</section>
Pruébalo »
La barra de navegación puede.divideragregar una línea divisoria mediante la clase (en pantallas grandes es una línea vertical, en pantallas pequeñas es horizontal):
Ejemplo
<li class="active"><a href="#">Home</a></li>
<li class="divider"></li>
<li><a href="#">Page 1</a></li>
<li class="divider"></li>
<li><a href="#">Page 2</a></li>
<li class="divider"></li>
<li><a href="#">Page 3</a></li>
<li class="divider"></li>
</ul>
Pruébalo »
Menú desplegable de la barra de navegación
La barra de navegación superior puede incluir un menú desplegable.
Puedes hacerlo agregando<li>al elemento.has-dropdownla clase para configurar el menú desplegable:
Ejemplo
<ul class="left">
<li class="active"><a href="#">Home</a></li>
<li class="has-dropdown">
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
<li><a href="#">Second link in dropdown</a></li>
<li class="active"><a href="#">Active link in dropdown</a></li>
</ul>
</li>
</ul>
</section>
Pruébalo »
Separador
Usa.dividerla clase para establecer el separador del menú desplegable:
Ejemplo
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Orange</a></li>
<li class="divider"></li>
<li><a href="#">Kale</a></li>
<li><a href="#">Spinach</a></li>
</ul>
Etiqueta del menú desplegable
En<li>Agrega dentro de<label>el elemento para establecer la etiqueta (título) del menú desplegable:
Ejemplo
<li><label>Fruit</label></li>
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Orange</a></li>
<li class="divider"></li>
<li><label>Vegetable</label></li>
<li><a href="#">Kale</a></li>
<li><a href="#">Spinach</a></li>
</ul>
Menú desplegable anidado
El menú desplegable puede contener otro menú desplegable anidado:
Ejemplo
<ul class="left">
<li class="has-dropdown">
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><label>Level 1</label></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="has-dropdown">
<a href="#">New dropdown</a>
<ul class="dropdown">
<li><label>Level 2</label></li>
<li><a href="#">2nd level dropdown</a></li>
<li><a href="#">2nd level dropdown</a></li>
<li class="has-dropdown">
<a href="#">New dropdown</a>
<ul class="dropdown">
<li><label>Level 3</label></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
Pruébalo »
Clicable
Por defecto, el menú desplegable de la barra de navegación se muestra al pasar el mouse sobre él. Podemos usardata-options="is_hover: false"el atributo para configurar que la barra de navegación se muestre al hacer clic con el mouse:
Botones e iconos en la barra de navegación
Puedes colocar iconos y botones en la barra de navegación:
Puedes poner iconos en la barra de navegación. Para más estilos de iconos, consultaTutorial de iconos de Foundation:
Ejemplo
<!-- Estilos de iconos de Foundation -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/foundation-icons.min.css">
</head>
<ul class="left">
<li class="active"><a href="#"><i class="fi-home"></i> Home</a></li>
<li><a href="#"><i class="fi-torso"></i> Sign Up</a></li>
<li><a href="#"><i class="fi-magnifying-glass"></i> Search</a></li>
</ul>
Pruébalo »
Barra de navegación fija
La barra de navegación se puede fijar en la parte superior de la página.
Cuando la página se desplaza, la barra de navegación permanece fija en la parte superior.
Para fijar la barra de navegación, solo tienes que colocarla<div class="fixed">dentro de:
Posicionamiento absoluto de la barra de navegación
Podemos colocar la barra de navegación dentro de<div class="sticky">para configurar el posicionamiento absoluto de la barra de navegación. Cuando la barra de desplazamiento llega a esa área, la barra de navegación permanece fija en la parte superior como una barra de navegación fija:
Cuando uses.stickyla clase, la barra de navegación superior permanecerá fija en todos los tamaños de pantalla. Si necesitas configurarla en una pantalla específica, solo tienes que<nav>agregar endata-options="sticky_on: small|medium|large"el atributo es suficiente:
Ejemplo
<!-- Solo en pantallas grandes -->
<nav class="top-bar" data-topbar data-options="sticky_on: large">
..
</nav>
</div>
O configura varios tamaños de pantalla mediante un array:
Ejemplo
<!-- Pantallas pequeñas y grandes (sin pantallas medianas) -->
<nav class="top-bar" data-topbar data-options="sticky_on: [small, large]">
..
</nav>
</div>