CSS 导航

GUI下有一个导航栏或导航系统，可帮助访问者访问信息。它是网页上的UI元素，其中包含网站其他部分的链接。

导航栏通常以水平链接列表的形式显示在页面顶部。可以将其放置在徽标或标题的下方，但应始终将其放置在网页的主要内容之前。

使用易于使用的导航对于网站很重要。它在网站中起着重要作用，因为它允许访问者快速访问任何部分。

让我们详细讨论水平导航栏和垂直导航栏。

水平导航栏

水平导航栏是水平链接列表，通常位于页面顶部。

让我们看看如何使用创建水平导航栏。

示例

在此示例中，我们添加了

overflow:hidden属性，以防止

li元素进入列表之外，而

display:block属性将链接显示为block元素，并使整个链接区域可单击。

我们还添加了

float:left属性，该属性使用float来使块元素彼此相邻滑动。

如果要使用全角背景色，则必须将

background-color属性添加

• 而不是

元素。

ul {

list-style-type: none;

margin: 0;

padding: 0px;

overflow: hidden;

background-color: lightgray;

}

li {

float: left;

}

li a {

display: block;

color: blue;

font-size:20px;

text-align: center;

padding: 10px 20px;

text-decoration: none;

}

.active{

background-color: gray;

color: white;

}

li a:hover {

background-color: orange;

color: white;

}

• Home
• Java
• HTML
• CSS

输出：

边界分隔线

我们可以使用

border-right属性在导航栏中的链接之间添加边框。以下示例对其进行了更清晰的说明。

示例

ul {

list-style-type: none;

margin: 0;

padding: 0px;

overflow: hidden;

background-color: lightgray;

}

li {

float: left;

border-right: 1px solid blue;

}

li a {

display: block;

color: blue;

font-size:20px;

text-align: center;

padding: 10px 20px;

text-decoration: none;

}

.active{

background-color: gray;

color: white;

}

li a:hover {

background-color: orange;

color: white;

}

• Home
• Java
• HTML
• CSS

输出：

固定的导航栏

滚动页面时，固定的导航栏位于页面的底部或顶部。参见相同的示例。

示例

ul {

list-style-type: none;

position: fixed;

width:100%;

top:0;

margin: 0;

padding: 0px;

overflow: hidden;

background-color: lightgray;

}

li {

float: left;

border-right: 1px solid blue;

}

li a {

display: block;

color: blue;

font-size:20px;

text-align: center;

padding: 10px 20px;

text-decoration: none;

}

.active{

background-color: gray;

color: white;

}

li a:hover {

background-color: orange;

color: white;

}

• Home
• Java
• HTML
• CSS

Hello World

Scroll down the page to see the fixed navigation bar

输出：

粘性导航

position:sticky;属性用于根据用户的滚动位置来定位元素。

此CSS属性允许元素在滚动到达特定点时停留。根据滚动位置，粘性元素可在

固定和

相对属性

之间切换。

例子

ul {

list-style-type: none;

position: sticky;

width:100%;

top:0;

margin: 0;

padding: 0px;

overflow: hidden;

background-color: lightgray;

}

li {

float: left;

border-right: 1px solid blue;

}

li a {

display: block;

color: blue;

font-size:20px;

text-align: center;

padding: 10px 20px;

text-decoration: none;

}

.active{

background-color: gray;

color: white;

}

li a:hover {

background-color: orange;

color: white;

}

Example of sticky navigation bar

• Home
• Java
• HTML
• CSS

Hello World

Scroll down the page to see the sticky navigation bar

输出：

下拉导航栏

下面的示例说明如何在导航栏中创建下拉菜单。

示例

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: lightgray;

}

li {

float: left;

}

li a, .dropbtn {

display: inline-block;

color: blue;

font-size:20px;

text-align: center;

padding: 10px 20px;

text-decoration: none;

}

.active{

background-color: gray;

color: white;

}

li a:hover , .dropdown:hover .dropbtn{

background-color: orange;

color: white;

}

.dropdown-content {

display: none;

position: absolute;

background-color: lightblue;

min-width: 160px;

box-shadow: 5px 8px 10px 0px black;

}

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

}

.dropdown-content a:hover {

background-color: gray;

color:white;

}

.dropdown:hover .dropdown-content {

display: block;

}

h1,h2,h3{

text-align:center;

color: green;

}

• Home
• Java
• C
• C++

• Web-designing

  HTML

  CSS

  Bootstrap

Welcome to the lidihuo.com

Example of Dropdown Menu inside a Navigation Bar

Move your cursor on the "web-designing" to see the dropdown effect.

输出：

垂直导航栏

在此示例中，我们将了解如何构建垂直导航栏。

示例

ul {

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

background-color: lightblue;

}

li a {

display: block;

color: blue;

font-size:20px;

padding: 8px 16px;

text-decoration: none;

}

.active{

background-color: orange;

color: white;

}

li a:hover {

background-color: orange;

color: white;

}

Vertical Navigation Bar

• Home
• Java
• CSS
• HTML
• Bootstrap

输出：

我们可以将链接对准中心并在它们之间添加边框。

示例

ul {

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

background-color: lightblue;

border: 1px solid blue;

}

li a {

display: block;

color: blue;

font-size:20px;

padding: 10px 20px;

text-decoration: none;

border-bottom: 1px solid blue;

}

ul:last-child {

border-bottom: none;

}

.active{

background-color: orange;

color: white;

}

li a:hover {

background-color: orange;

color: white;

}

Vertical Navigation Bar

• Home
• Java
• CSS
• HTML
• Bootstrap

输出：

全高固定垂直导航栏

我们还可以使用属性

height：100％;创建固定全高侧面导航栏和

位置：固定；

示例

body{

background-color: pink;

}

ul {

list-style-type: none;

margin: 0;

padding: 0;

height:100%;

top:0;

width:150px;

overflow: auto;

background-color: lightblue;

border: 1px solid blue;

position: fixed;

}

li a {

display: block;

color: blue;

font-size:20px;

padding: 10px 20px;

text-decoration: none;

border-bottom: 1px solid blue;

}

.active{

background-color: orange;

color: white;

}

li a:hover {

background-color: orange;

color: white;

}

• Home
• Java
• CSS
• HTML
• Bootstrap

输出：