CSS 导航栏

CSS 导航栏

导航栏是图形用户界面(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">Tutorialspoint</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 TutorialsPoint</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">Tutorialspoint</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">Tutorialspoint</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 TutorialsPoint</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">Tutorialspoint</a>
      <a href="#">Home</a>
      <a href="#">Articles</a>
      <a href="#">Courses</a>
      <a href="#">eBook</a>
   </nav>
   <div  class="heading">
      <h1>Welcome to TutorialsPoint</h1>
      <h2>Tutorialspoint 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>Scroll down to see the effect</h1>
   <nav class="navbar">
      <a href="#" class="active-link">Tutorialspoint</a>
      <a href="#">Home</a>
      <a href="#">Articles</a>
      <a href="#">Courses</a>
      <a href="#">eBook</a>
   </nav>
   <div  class="heading">
      <h1>Welcome to TutorialsPoint</h1>
      <h2>Tutorialspoint 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">Tutorialspoint</a>
      <a href="#">Home</a>
      <a href="#">Articles</a>
      <a href="#">Courses</a>
      <a href="#">eBook</a>
   </nav>
   <h1>Welcome to TutorialsPoint</h1>
   <h2>Tutorialspoint 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">Tutorialspoint</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 TutorialsPoint</h1>
      <h2>Tutorialspoint CSS Fixed Vertical Navbar</h2>
      <h3>Simple Easy Learning at your fingertips</h3>
   </div>
</body>
</html>

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程