The navigation bar at the top of the Foundation

May 04, 2021 Foundation5

1. The navigation bar at the top of the Foundation

2. 导航栏的下拉菜单

3. 下拉菜单标签

4. Buttons and icons on the navigation bar

5. Pin the navigation bar

6. The navigation bar is absolutely positioned

The navigation bar at the top of the Foundation

The top navigation bar is placed at the head of the page:

Instance

< nav class= "top-bar" data-topbar >
< ul class= "title-area" >
< li class= "name" >
If you don!--t need a title or icon, you can delete it--
< h1 > < a href= "#" > WebSiteName < /a > < /h1 >
< /li >

< 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 >

The !-- initialize Foundation JS
< script >
$(document).ready(function() {
$(document).foundation();
})
< /script >

Try it out . . .

Instance resolution

Create <nav class="top-bar" data-topbar> .title-area class defines the site logo area (within the li.name prevented). W hen the screen is smaller, you can see a "menu" button. Foundation's menu automatically folds the drink extension based on the screen size:

On the small screen, many options are hidden due to size. li.toggle-topbar menu.icon creates a menu button that can be clicked to display hidden options.
Tip: Reset the browser window to see the effect.

.top-bar-section the link section of the navigation. .left class specifies that the link is left-aligned. .active class is used to display selected items with a blue background.

Tip: If you want to navigate the link to the right .left modify the .right :

Instance

< section class= "top-bar-section" >
< ul class= "right" > ...

Try it out . . .

You can set the left alignment to the right at the same time:

Instance

< 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 >
< /ul >
< ul class= "right" >
< li > < a href= "#" > Sign Up < /a > < /li >
< li > < a href= "#" > Login < /a > < /li >
< /ul >
< /section >

Try it out . . .

导航栏可以通过 .divider 类来添加分割线 (大屏幕上是垂直的线，小屏幕上是水平线):

Instance

< ul class= "left" >
< 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 out . . .

导航栏的下拉菜单

顶部导航栏可以设置下拉菜单。

可以通过在 <li> 元素上添加 .has-dropdown 类来设置下拉菜单:

Instance

< section class= "top-bar-section" >
< 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 out . . .

分割线

使用 .divider 类来设置下拉菜单的分割线:

Instance

< ul class= "dropdown" >
< 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 >

Try it out . . .

下拉菜单标签

在 <li> 内添加 <label> 元素来设置下拉菜单的标签(标题):

Instance

< ul class= "dropdown" >
< 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 >

Try it out . . .

内嵌下拉菜单

下拉菜单可以再嵌入一个下拉菜单：

Instance

< section class= "top-bar-section" >
< 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 out . . .

可点击

默认情况下导航栏的下拉菜单在鼠标移动过去后显示，我们可以使用 data-options="is_hover: false" 属性来设置导航栏在鼠标在点击后显示:

Instance

< nav class= "top-bar" data-topbar data-options= "is_hover: false" >

Try it out . . .

Buttons and icons on the navigation bar

You can place icons and buttons on the navigation bar:

Instance

< li > < a href= "#" class= "button" > Button Link < /a > < /li >

Try it out . . .

You can put icons on the navigation bar, and more picture styles can be viewed in the Foundation icon tutorial :

Instance

< head >
The !-- Foundation icon style
< link rel= "stylesheet" href= "http://statics.w3cschool.cn/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 out . . .

Pin the navigation bar

The navigation bar can be pinned to the top of the page.

The navigation bar does not move at the top as the page scrolls.

To pin the navigation bar, simply place the navigation bar inside the "fixed" of the <div class="fixed">

Instance

< div class= "fixed" >
< nav class= "top-bar" data-topbar >
...
< /nav >
< /div >

Try it out . . .

The navigation bar is absolutely positioned

We can set the absolute positioning of the navigation bar by putting the navigation bar within the <div class="sticky"> which does not move at the top like a fixed navigation bar when the scroll bar rolls into the area:

Instance

< div class= "sticky" >
< nav class= "top-bar" data-topbar >
...
< /nav >
< /div >

Try it out . . .

When you .sticky class, the top navigation bar is immobilized on all screen sizes. If you need to set it on the <nav> you only need to add data-options="sticky_on: small|medium|large" specified screen:

Instance

< div class= "sticky" >
Only on !-- screen --
< nav class= "top-bar" data-topbar data-options= "sticky_on: large" >
..
< /nav >
< /div >

Or set multiple screen sizes with arrays:

Instance

< div class= "sticky" >
Small !-- and large screens (no medium screens)
< nav class= "top-bar" data-topbar data-options= "sticky_on: [small, large]" >
..
< /nav >
< /div >

The navigation bar at the top of the Foundation

Table of contents

The navigation bar at the top of the Foundation

Instance

Instance resolution

Instance

Instance

Instance

导航栏的下拉菜单

Instance

分割线

Instance

下拉菜单标签

Instance

内嵌下拉菜单

Instance

可点击

Instance

Buttons and icons on the navigation bar

Instance

Instance

Pin the navigation bar

Instance

The navigation bar is absolutely positioned

Instance

Instance

Instance

Cookie Consent