导航栏是图形用户界面 (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>