导航栏是图形用户界面 (GUI) 的一部分，可帮助用户浏览网站、应用程序或其他软件。对于用户来说，快速轻松地导航到他们正在查找的内容至关重要。
导航栏可以是水平或垂直的，其中包含重要页面或功能的链接。
导航栏还可以包含其他元素，例如网站或应用程序的徽标、搜索栏或社交媒体图标。可以使用 CSS 设置导航栏的样式来更改其外观。
CSS 水平导航栏
以下示例显示水平导航栏，这是显示在顶部的最常见的导航栏类型。如下所示的网页 -
<html>
<head>
<style>
ul {
background-color: #28bf17;
overflow: hidden;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 17px;
}
li a:hover {
background-color: #dd9ede;
color: black;
}
.active-link {
background-color: #f53319;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="active-link">Yxjc123</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">eBook</a></li>
</ul>
<h1>Welcome to Yxjc123</h1>
<h3>Simple Easy Learning at your fingertips</h3>
</body>
</html> CSS 垂直导航栏
垂直导航栏也称为侧边栏菜单。它通常位于屏幕的左侧或右侧。
这是一个示例 -
<html>
<head>
<style>
ul {
background-color: #28bf17;
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
}
li {
text-align: center;
}
li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 17px;
}
li a:hover {
background-color: #dd9ede;
color: black;
}
.active-link {
background-color: #f53319;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="active-link">Yxjc123</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">eBook</a></li>
</ul>
</body>
</html> CSS 下拉导航栏
下拉导航栏是一个导航带有下拉菜单的栏，当用户将鼠标悬停在链接上时会出现该下拉菜单。下拉菜单是一种在小空间中显示相关项目列表的方法。
这是一个示例 -
<html>
<head>
<style>
.navbar {
background-color: #28bf17;
overflow: hidden;
}
.navbar a {
display: block;
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 15px;
}
.navbar a:hover {
background-color: #dd9ede;
color: black;
}
.active-link {
background-color: #f53319;
color: white;
}
.dropdown {
float: left;
}
.dropdown .dropbtn {
border: none;
color: #f2f2f2;
padding: 10px;
background-color: #28bf17;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #c7385a;
min-width: 120px;
}
.dropdown-content a {
float: none;
color: #f2f2f2;
padding: 10px;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #dd9ede;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<nav class="navbar">
<a href="#" class="active-link">Yxjc123</a>
<a href="#">Home</a>
<div class="dropdown">
<button class="dropbtn">Articles</button>
<div class="dropdown-content">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">Bootstrap</a>
</div>
</div>
<a href="#">Courses</a>
<a href="#">eBook</a>
</nav>
<h1>Welcome to Yxjc123</h1>
<h3>Simple Easy Learning at your fingertips</h3>
</body>
</html> CSS 固定导航栏
固定导航栏是一个导航栏，当用户向下滚动页面时，它会粘在屏幕顶部。要固定导航栏，您可以使用 position:fixed 属性。
这里是一个示例 -
<html>
<head>
<style>
body {
margin: 0;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: #28bf17;
}
.navbar a {
display: block;
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #dd9ede;
color: black;
}
.active-link {
background-color: #f53319;
color: white;
}
.heading {
padding-top: 170px;
text-align: center;
background-color: #e6e451;
padding-bottom: 300px
}
</style>
</head>
<body>
<nav class="navbar">
<a href="#" class="active-link">Yxjc123</a>
<a href="#">Home</a>
<a href="#">Articles</a>
<a href="#">Courses</a>
<a href="#">eBook</a>
</nav>
<div class="heading">
<h1>Welcome to Yxjc123</h1>
<h2>Yxjc123 CSS Fixed Navbar</h2>
<h3>Simple Easy Learning at your fingertips</h3>
</div>
</body>
</html> CSS 粘性导航栏
您可以使用 position: Sticky 属性来创建粘性导航栏，即使用户向下滚动页面，它也会保留在屏幕顶部。
这是一个示例 -
<html>
<head>
<style>
body {
margin: 0;
}
.navbar {
position:sticky;
top: 0;
width: 100%;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: #28bf17;
}
.navbar a {
display: block;
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #dd9ede;
color: black;
}
.active-link {
background-color: #f53319;
color: white;
}
.heading {
padding-top: 170px;
text-align: center;
background-color: #e6e451;
padding-bottom: 300px
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>向下滚动查看效果</h1>
<nav class="navbar">
<a href="#" class="active-link">Yxjc123</a>
<a href="#">Home</a>
<a href="#">Articles</a>
<a href="#">Courses</a>
<a href="#">eBook</a>
</nav>
<div class="heading">
<h1>Welcome to Yxjc123</h1>
<h2>Yxjc123 CSS Sticky Navbar</h2>
<h3>Simple Easy Learning at your fingertips</h3>
</div>
</body>
</html> 导航栏的分隔线
您还可以使用 border-right 属性在导航栏中的链接之间添加分隔线，如下所示 -
<html>
<head>
<style>
.navbar {
background-color: #28bf17;
overflow: hidden;
}
.navbar a {
display: block;
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 17px;
border-right: 2px solid #f013c8;
}
.navbar a:hover {
background-color: #dd9ede;
color: black;
}
.active-link {
background-color: #f53319;
color: white;
}
</style>
</head>
<body>
<nav class="navbar">
<a href="#" class="active-link">Yxjc123</a>
<a href="#">Home</a>
<a href="#">Articles</a>
<a href="#">Courses</a>
<a href="#">eBook</a>
</nav>
<h1>Welcome to Yxjc123</h1>
<h2>Yxjc123 CSS Navbar with borders</h2>
</body>
</html> 固定垂直导航栏
以下示例演示如何使用 position:fixed 属性创建一个固定的垂直导航栏，这确保导航栏保持在屏幕的左侧，即使用户向下滚动页面也是如此。
<html>
<head>
<style>
ul {
position: fixed;
background-color: #28bf17;
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
height: 100%;
}
li {
text-align: center;
border-bottom: 2px solid #f013c8;
}
li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 17px;
}
li a:hover {
background-color: #dd9ede;
color: black;
}
.active-link {
background-color: #f53319;
color: white;
}
.heading {
padding-top: 170px;
text-align: center;
background-color: #e6e451;
padding-bottom: 300px
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="active-link">Yxjc123</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">eBook</a></li>
</ul>
<div class="heading">
<h1>Welcome to Yxjc123</h1>
<h2>Yxjc123 CSS Fixed Vertical Navbar</h2>
<h3>Simple Easy Learning at your fingertips</h3>
</div>
</body>
</html>