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;
}
输出：
边界分隔线
我们可以使用
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;
}
输出：
固定的导航栏
滚动页面时，固定的导航栏位于页面的底部或顶部。参见相同的示例。
示例
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;
}
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
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;
}
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
输出：
我们可以将链接对准中心并在它们之间添加边框。
示例
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
输出：
全高固定垂直导航栏
我们还可以使用属性
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;
}
Welcome to the lidihuo.com
Side navigation bar with height: 100%; and position: fixed;
Scroll the page, and see how the sidenav sticks to the page
输出：
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
