Foundation top navigation bar
The top navigation bar on the head of the page:
Examples
<Ul class = "title-area ">
<Li class = "name">
<! - If you do not need a title or icon to delete it ->
<H1> <a href = " #"> WebSiteName </ a> </ h1>
</ Li>
<- Fold button on the small screen:! Remove .menu-icon type, you can remove the icon.
If you need to display only the picture, you can delete the "Menu" Text ->
<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>
<! - Initialization Foundation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
try it"
Examples of analytical
Use <nav class="top-bar" data-topbar> " data-topbar> Create standard toolbar. .title-area class defines the site logo area (must be prevented li.name inside). After the smaller screen you can see a "menu" button. Foundation of the menu according to screen size automatically extended folding drink:
On the small screen, because of the size of many of the options will be hidden. li.toggle-topbar menu.icon class creates a menu button, click it to show the hidden options.
? Tip: Reset your browser window to see the effect.
.top-bar-section defines the navigation links section. .left class specifies the link left-aligned. .active class is used to display the selected items, a blue background.
Tip: If you want to right-align the navigation links can be .left modify .right :
You can also set the left alignment aligns with the right:
Examples
<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>
try it"
Navigation bar by .divider to add class dividing lines (vertical lines on the big screen, the small screen is a horizontal line):
Examples
<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>
try it"
Drop-down menu navigation bar
You can set the navigation bar at the top of the drop-down menu.
By the <li> the element is added .has-dropdown class to set the drop-down menu:
Examples
<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>
try it"
Dividing line
Use .divider class to set the dividing line drop-down menu:
Examples
<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>
Pull-down menu label
In <li> within add <label> element to set the label (title) pull-down menu:
Examples
<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>
Embedded drop-down menu
Drop-down menu can be embedded in a drop-down menu:
Examples
<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>
try it"
Clickable
By default, the drop-down menu in the navigation bar to move the mouse over the display, we can use the data-options="is_hover: false" " attribute to set the navigation bar is displayed at the click of the mouse:
Buttons and icons on the navigation bar
You can place icons on the navigation bar and buttons:
You can put an icon in the navigation bar, you can view more pictures Style Foundation Icon Tutorial :
Examples
<-! Foundation icon style ->
<Link rel = "stylesheet" href = "http://static.w3big.com/assets/foundation-icons/foundation-icons.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>
try it"
Fixed navigation
Navigation bar can be fixed at the top of the page.
Scroll the page navigation bar at the top is not moving.
To fix the navigation bar just to the navigation bar on the <div class="fixed"> inside to:
Navigation bar absolute positioning
We can put the navigation bar <div class="sticky"> in the navigation bar to set absolute positioning, when the scroll bar to roll to the region, the navigation bar as fixed as the navigation bar at the top does not move:
When you use .sticky class, the top navigation bar fixed and will in all screen sizes. If you need to specify the settings on the screen only in <nav> Previous data-options="sticky_on: small|medium|large" | medium | large" property:
Examples
<! - Only on the big screen ->
<Nav class = "top-bar " data-topbar data-options = "sticky_on: large">
..
</ Nav>
</ Div>
Or by an array of a plurality of screen size:
Examples
<! - Small screen and the big screen (no middle of the screen) ->
<Nav class = "top-bar " data-topbar data-options = "sticky_on: [small, large]">
..
</ Nav>
</ Div>