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>
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
:
Examples
<Ul class = "right"> /en.
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>
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>
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>
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>
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:
Examples
Buttons and icons on the navigation bar
You can place icons on the navigation bar and buttons:
Examples
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.w3write.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>
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:
Examples
<Nav class = "top-bar " data-topbar>
/en.
</ Nav>
</ Div>
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:
Examples
<Nav class = "top-bar " data-topbar>
/en.
</ Nav>
</ Div>
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">
/en
</ 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]">
/en
</ Nav>
</ Div>