Fondation barre supérieure de navigation
La barre de navigation supérieure sur la tête de la page:
Exemples
<Ul class = "title zone ">
<Class Li = "nom">
<! - Si vous n'avez pas besoin d' un titre ou une icône pour le supprimer ->
<H1> <a href = "#"> WebSiteName </ a> </ h1>
</ Li>
<- Bouton Fold sur le petit écran :! Supprimer le type .menu-icône, vous pouvez supprimer l'icône.
Si vous avez besoin pour afficher uniquement l'image, vous pouvez supprimer le "Menu" Texte ->
<Li class = "toggle-topbar menu icon"> <a href = "#"> <span> Menu </ span> </ a> </ li>
</ Ul>
<Section class = "top-bar -section">
<Class Ul = "left">
<Li class = "active"> <a href = "#"> Accueil </ 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>
<! - Initialisation Fondation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Essayez »
Des exemples d'analyses
Utilisez <nav class="top-bar" data-topbar> " data-topbar> Créer barre d' outils standard. .title-area classe définit la zone site logo (doit être empêché li.name à l' intérieur). Après l'écran plus petit, vous pouvez voir un bouton "menu". Fondation du menu selon la taille de l'écran automatiquement prolongé boisson pliage:
Sur le petit écran, en raison de la taille de la plupart des options seront cachés. li.toggle-topbar menu.icon classe crée un bouton de menu, cliquez dessus pour afficher les options cachées.
? Astuce: Réinitialiser la fenêtre de votre navigateur pour voir l'effet.
.top-bar-section définit les liens de navigation section. .left classe spécifie le lien aligné à gauche. .active classe est utilisée pour afficher les éléments sélectionnés, un fond bleu.
Astuce: Si vous voulez droit aligner les liens de navigation peut être .left modifier .right :
Vous pouvez également définir l'alignement gauche est aligné sur la droite:
Exemples
<Class Ul = "left">
<Li class = "active"> <a href = "#"> Accueil </ a> </ li>
<Li> <a href = "#"> Page 1 </ a> </ li>
<Li> <a href = "#"> Page 2 </ a> </ li>
</ Ul>
<Class Ul = "right">
<Li> <a href = "#"> Inscription </ a> </ li>
<Li> <a href = "#"> Connectez - vous </ a> </ li>
</ Ul>
</ Section>
Essayez »
Barre de navigation par .divider pour ajouter des lignes de division de classe (lignes verticales sur le grand écran, le petit écran est une ligne horizontale):
Exemples
<Li class = "active"> <a href = "#"> Accueil </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> Page 1 </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> Page 2 </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> Page 3 </ a> </ li>
<Li class = "diviseur"> </ li>
</ Ul>
Essayez »
Menu déroulant barre de navigation
Vous pouvez régler la barre de navigation en haut du menu déroulant.
Par <li> l'élément est ajouté .has-dropdown classe pour définir le menu déroulant:
Exemples
<Class Ul = "left">
<Li class = "active"> <a href = "#"> Accueil </ a> </ li>
<Class = Li "a-déroulant ">
<A Href = "#"> Dropdown </ a>
<Ul class = "déroulant">
<Li> <a href = "#"> Premier lien dans la liste déroulante </ a> </ li>
<Li> <a href = "#"> deuxième lien dans la liste déroulante </ a> </ li>
<Li class = "active"> <a href = "#"> Lien actif dans la liste déroulante </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Section>
Essayez »
ligne de partage
Utilisez .divider classe pour régler le menu déroulant ligne de démarcation:
Exemples
<Li> <a href = "#"> d' Apple </ a> </ li>
<Li> <a href = "#"> Banana </ a> </ li>
<Li> <a href = "#"> orange </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> Kale </ a> </ li>
<Li> <a href = "#"> Épinards </ a> </ li>
</ Ul>
Pull-down étiquette de menu
Dans <li> dans les add <label> élément pour définir l'étiquette (titre) dans le menu déroulant:
Exemples
<Li> <label> Fruit < / label> </ li>
<Li> <a href = "#"> d' Apple </ a> </ li>
<Li> <a href = "#"> Banana </ a> </ li>
<Li> <a href = "#"> orange </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <label> Légumes < / label> </ li>
<Li> <a href = "#"> Kale </ a> </ li>
<Li> <a href = "#"> Épinards </ a> </ li>
</ Ul>
menu déroulant intégré
Menu déroulant peut être intégré dans un menu déroulant:
Exemples
<Class Ul = "left">
<Class = Li "a-déroulant ">
<A Href = "#"> Dropdown </ a>
<Ul class = "déroulant">
<Li> <label> Niveau 1 </ label> </ li>
<Li> <a href = "#"> Lien </ a> </ li>
<Li> <a href = "#"> Lien </ a> </ li>
<Class = Li "a-déroulant ">
<A Href = "#"> Nouveau menu déroulant </ a>
<Ul class = "déroulant">
<Li> <label> Niveau 2 </ label> </ li>
<Li> <a href = "#"> 2e niveau déroulant </ a> </ li>
<Li> <a href = "#"> 2e niveau déroulant </ a> </ li>
<Class = Li "a-déroulant ">
<A Href = "#"> Nouveau menu déroulant </ a>
<Ul class = "déroulant">
<Li> <label> Niveau 3 </ label> </ li>
<Li> <a href = "#"> 3e niveau déroulant </ a> </ li>
<Li> <a href = "#"> 3e niveau déroulant </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Section>
Essayez »
cliquable
Par défaut, le menu déroulant dans la barre de navigation pour déplacer la souris sur l'écran, nous pouvons utiliser le data-options="is_hover: false" " attribut pour définir la barre de navigation est affichée au clic de la souris:
Boutons et icônes sur la barre de navigation
Vous pouvez placer des icônes sur la barre de navigation et les boutons:
Vous pouvez mettre une icône dans la barre de navigation, vous pouvez voir plus de photos de style Fondation Tutorial Icône :
Exemples
<! - Fondation icône de style ->
<Link rel = "stylesheet" href = "http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
</ Head>
<Class Ul = "left">
<Li class = "active"> <a href = "#"> <i class = "fi-home"> </ i> Accueil </ a> </ li>
<Li> <a href = "#"> <i class =" fi-torse "> </ i> Inscrivez - vous </ a> </ li>
<Li> <a href = "#"> <i class =" fi-loupe "> </ i> Rechercher </ a> </ li>
</ Ul>
Essayez »
navigation fixe
Barre de navigation peut être fixé en haut de la page.
Faites défiler la barre de navigation de page en haut ne se déplace pas.
Pour fixer la barre de navigation juste pour la barre de navigation sur la <div class="fixed"> à l' intérieur pour:
Barre de navigation de positionnement absolu
Nous pouvons mettre la barre de navigation <div class="sticky"> dans la barre de navigation pour régler le positionnement absolu, lorsque la barre de défilement pour rouler dans la région, la barre de navigation comme fixé comme la barre de navigation en haut ne bouge pas:
Lorsque vous utilisez .sticky classe, la barre de navigation supérieure fixe et volonté dans toutes les tailles d'écran. Si vous avez besoin de spécifier les paramètres de l'écran que dans <nav> Précédent data-options="sticky_on: small|medium|large" | moyenne | grande" propriété:
Exemples
<! - Seulement sur le grand écran ->
<Nav class = "top-bar " data-topbar data-options = "sticky_on grand">
..
</ Nav>
</ Div>
Ou par un réseau d'une pluralité de dimensions de l'écran:
Exemples
<! - Petit écran et le grand écran (pas de milieu de l'écran) ->
<Nav class = "top-bar " data-topbar data-options = "sticky_on: [small, large]">
..
</ Nav>
</ Div>