El mejor tutorial de Fundación barra de navegación superior en 2024. En este tutorial podrás aprender
Desplegable de la barra de menú de navegación,Pull-down etiqueta de menú,Botones e iconos en la barra de navegación,navegación fijo,Barra de navegación de posicionamiento absoluto,
Fundación barra de navegación superior
La barra de navegación superior en la cabecera de la página:
Ejemplos
<Nav class = "barra superior " datos topbar>
<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
:
Ejemplos
<Sección class = "top-bar -section">
<Class = "derecho" ul> es.
Trate » También puede establecer la alineación izquierda se alinea con la derecha:
Ejemplos
<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>
</ 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
<Ul class = "left">
<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
<Sección class = "top-bar -section">
<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
<Ul class = "desplegable">
<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>
Trate »
Pull-down etiqueta de menú
En <li>
dentro de complemento <label>
elemento para fijar la etiqueta (título) del menú desplegable:
Ejemplos
<Ul class = "desplegable">
<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>
Trate » menú desplegable incrustado
Menú desplegable que se puede incrustar en un menú desplegable:
Ejemplos
<Sección class = "top-bar -section">
<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:
Ejemplos
<Nav class = "top-bar "-topbar de datos de datos-options = "is_hover: true">
Trate »
Botones e iconos en la barra de navegación
Puede colocar iconos en la barra de navegación y botones:
Ejemplos
<Li> <a href = "class = #" "button"> Botón de enlace </ a> </ li>
Trate » 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
<Head>
<! - Icono de estilo Fundación ->
<Link rel = "stylesheet" href = "http://static.w3write.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
<Div class = "fija">
<Nav class = "barra superior " datos topbar>
es.
</ 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
<Div class = "pegajosa">
<Nav class = "barra superior " datos topbar>
es.
</ 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
<Div class = "pegajosa">
<- Sólo en la gran pantalla ->
<Nav class = "top-bar "-topbar de datos de datos-options = "sticky_on: large">
es
</ Nav>
</ Div>
O por un conjunto de una pluralidad de tamaño de la pantalla:
Ejemplos
<Div class = "pegajosa">
<! - 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]">
es
</ Nav>
</ Div>