Fundación barra de navegación superior
La barra de navegación superior en la cabecera de la página:
Ejemplos
<Ul class = "titulo-área ">
<Li class = "nombre">
<! - Si usted no necesita un título o un icono para eliminarlo ->
<H1> <a href = "#"> WebSiteName </ a> </ h1>
</ Li>
<- Fold botón en la pequeña pantalla :! Eliminar tipo .menu-icono, puede eliminar el icono.
Si necesita mostrar sólo la imagen, se puede eliminar el texto "Menú" ->
<Li class = "-topbar alternar menú-icono"> <a href = "#"> <span> Menú </ span> </ a> </ li>
</ Ul>
<Sección class = "top-bar -section">
<Ul class = "left">
<Li class = "activa"> <a href = "#"> Inicio </ a> </ li>
<Li> <a href = "#"> Página 1 </ a> </ li>
<Li> <a href = "#"> Página 2 </ a> </ li>
<Li> <a href = "#"> Page 3 </ a> </ li>
</ Ul>
</ Section>
</ Nav>
<! - Inicialización Fundación JS ->
<Script>
$ (Document) ready (function () {
$ (Document) .foundation ();
})
</ Script>
Trate »
Ejemplos de analítica
Utilice <nav class="top-bar" data-topbar> " datos topbar> Crear barra de herramientas estándar. .title-area clase define la zona logo del sitio (debe ser evitado li.name interior). Después de que la pantalla más pequeña se puede ver un botón "menú". Fundación del menú de acuerdo al tamaño de la pantalla extendida automáticamente la bebida del plegamiento:
En la pequeña pantalla, debido al tamaño de muchas de las opciones serán ocultados. li.toggle-topbar menu.icon clase crea un botón de menú, haga clic en él para mostrar las opciones ocultas.
? Consejo: Cambiar la ventana de su navegador para ver el efecto.
.top-bar-section define la sección de enlaces de navegación. .left clase especifica el enlace alineado a la izquierda. .active clase se utiliza para mostrar los elementos seleccionados, un fondo azul.
Consejo: Si desea haga alinear el menú de navegación puede ser .left modificar .right :
También puede establecer la alineación izquierda se alinea con la derecha:
Ejemplos
<Ul class = "left">
<Li class = "activa"> <a href = "#"> Inicio </ a> </ li>
<Li> <a href = "#"> Página 1 </ a> </ li>
<Li> <a href = "#"> Página 2 </ a> </ li>
</ Ul>
<Ul class = "right">
<Li> <a href = "#"> Registrarse </ a> </ li>
<Li> <a href = "#"> Login </ a> </ li>
</ Ul>
</ Section>
Trate »
Barra de navegación por .divider añadir líneas divisorias de clase (líneas verticales en la pantalla grande, la pequeña pantalla es una línea horizontal):
Ejemplos
<Li class = "activa"> <a href = "#"> Inicio </ a> </ li>
<Li class = "divisor"> </ li>
<Li> <a href = "#"> Página 1 </ a> </ li>
<Li class = "divisor"> </ li>
<Li> <a href = "#"> Página 2 </ a> </ li>
<Li class = "divisor"> </ li>
<Li> <a href = "#"> Page 3 </ a> </ li>
<Li class = "divisor"> </ li>
</ Ul>
Trate »
Desplegable de la barra de menú de navegación
Puede configurar la barra de navegación en la parte superior del menú desplegable.
Por el <li> el elemento se añade .has-dropdown clase para ajustar el menú desplegable:
Ejemplos
<Ul class = "left">
<Li class = "activa"> <a href = "#"> Inicio </ a> </ li>
<Li class = "tiene-desplegable ">
<A Href = "#"> desplegable </ a>
<Ul class = "desplegable">
<Li> <a href = "#"> primer eslabón de desplegable </ a> </ li>
<Li> <a href = "#"> segundo eslabón de desplegable </ a> </ li>
<Li class = "activa"> <a href = "#"> Enlace activo en la lista desplegable </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Section>
Trate »
línea divisoria
Utilice .divider clase para ajustar el menú desplegable línea divisoria:
Ejemplos
<Li> <a href = "#"> de Apple </ a> </ li>
<Li> <a href = "#"> plátano </ a> </ li>
<Li> <a href = "#"> de Orange </ a> </ li>
<Li class = "divisor"> </ li>
<Li> <a href = "#"> Kale </ a> </ li>
<Li> <a href = "#"> espinaca </ a> </ li>
</ Ul>
Pull-down etiqueta de menú
En <li> dentro de complemento <label> elemento para fijar la etiqueta (título) del menú desplegable:
Ejemplos
<Li> <label> Frutas < / label> </ li>
<Li> <a href = "#"> de Apple </ a> </ li>
<Li> <a href = "#"> plátano </ a> </ li>
<Li> <a href = "#"> de Orange </ a> </ li>
<Li class = "divisor"> </ li>
<Li> <label> vegetal < / label> </ li>
<Li> <a href = "#"> Kale </ a> </ li>
<Li> <a href = "#"> espinaca </ a> </ li>
</ Ul>
menú desplegable incrustado
Menú desplegable que se puede incrustar en un menú desplegable:
Ejemplos
<Ul class = "left">
<Li class = "tiene-desplegable ">
<A Href = "#"> desplegable </ a>
<Ul class = "desplegable">
<Li> <label> Nivel 1 </ label> </ li>
<Li> <a href = "#"> Enlace </ a> </ li>
<Li> <a href = "#"> Enlace </ a> </ li>
<Li class = "tiene-desplegable ">
<A Href = "#"> Nueva desplegable </ a>
<Ul class = "desplegable">
<Li> <label> Nivel 2 </ label> </ li>
<Li> <a href = "#"> segundo nivel desplegable </ a> </ li>
<Li> <a href = "#"> segundo nivel desplegable </ a> </ li>
<Li class = "tiene-desplegable ">
<A Href = "#"> Nueva desplegable </ a>
<Ul class = "desplegable">
<Li> <label> Nivel 3 </ label> </ li>
<Li> <a href = "#"> 3er nivel desplegable </ a> </ li>
<Li> <a href = "#"> 3er nivel desplegable </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Section>
Trate »
se puede hacer clic
De manera predeterminada, el menú desplegable de la barra de navegación para mover el puntero del ratón sobre la pantalla, podemos utilizar la data-options="is_hover: false" " atributo para configurar la barra de navegación se muestra en el clic del ratón:
Botones e iconos en la barra de navegación
Puede colocar iconos en la barra de navegación y botones:
Se puede poner un icono en la barra de navegación, puede ver más fotos del estilo de la Fundación del icono Tutorial :
Ejemplos
<! - Icono de estilo Fundación ->
<Link rel = "stylesheet" href = "http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
</ Head>
<Ul class = "left">
<Li class = "activa"> <a href = "#"> <i class = "fi-casa"> </ i> Inicio </ a> </ li>
<Li> <a href = "#"> <i class =" fi-torso "> </ i> Regístrese </ a> </ li>
<Li> <a href = "#"> <i class =" fi-lupa "> </ i> Buscar </ a> </ li>
</ Ul>
Trate »
navegación fijo
Barra de navegación se puede fijar en la parte superior de la página.
Desplazar la barra de navegación de páginas en la parte superior no se está moviendo.
Para fijar la barra de navegación sólo para la barra de navegación de la <div class="fixed"> interior para:
Ejemplos
<Nav class = "barra superior " datos topbar>
...
</ Nav>
</ Div>
Trate »
Barra de navegación de posicionamiento absoluto
Podemos poner la barra de navegación <div class="sticky"> en la barra de navegación para establecer la posición absoluta, cuando la barra de desplazamiento para rodar a la región, la barra de navegación tan fija como la barra de navegación en la parte superior no se mueve:
Ejemplos
<Nav class = "barra superior " datos topbar>
...
</ Nav>
</ Div>
Trate »
Cuando se utiliza .sticky clase, la barra de navegación superior fijo y voluntad en todos los tamaños de pantalla. Si es necesario especificar la configuración de la pantalla sólo en <nav> Anterior data-options="sticky_on: small|medium|large" | mediano | grande" propiedad:
Ejemplos
<- Sólo en la gran pantalla ->
<Nav class = "top-bar "-topbar de datos de datos-options = "sticky_on: large">
..
</ Nav>
</ Div>
O por un conjunto de una pluralidad de tamaño de la pantalla:
Ejemplos
<! - Pantalla pequeña y la gran pantalla (sin medio de la pantalla) ->
<Nav class = "top-bar "-topbar datos-opciones de datos = "sticky_on: [pequeño, grande]">
..
</ Nav>
</ Div>