CSS 导航栏

2025年3月26日 | 阅读 8 分钟

什么是 CSS 导航栏？

在 CSS 中，导航栏（也称为 navbar）用于界面中，为网站设计中的各种选择器或页面用户提供导航链接或菜单。用户可以轻松地使用它作为视觉指南来浏览网站内容。

借助导航栏，我们可以改善网页的呈现和样式，它还包括使用 CSS 描述的设计、颜色、字体和间距。CSS 导航栏使用 CSS 属性和规则开发和样式化，以产生特定的外观和功能。

CSS 导航栏的特点

导航栏的一些特点如下：

布局选项：在 CSS 中，导航栏可以垂直放置在网页的侧面，也可以水平放置在顶部。
导航链接：菜单包含指向网站不同页面和部分的链接。这些链接通常具有按钮、文本或图标样式。
下拉菜单：下拉菜单是导航栏可以添加的另一个功能。当用户悬停或选择菜单项时，会显示附加链接或选项。
样式：CSS 允许设计师更改导航栏的视觉元素，例如颜色、字体、边框和悬停效果。这有助于创建统一且视觉上吸引人的设计，与网站的整体美学融为一体。
响应式设计：现代导航栏通常采用响应式设计，可适应各种屏幕尺寸和设备。借助响应式设计，我们可以确保导航在桌面和移动设备上都能保持美观和令人愉悦。
交互：借助 CSS，我们还可以为导航元素添加交互效果，例如在点击链接时更改链接颜色，或者在悬停时显示高亮效果。

借助 CSS 导航栏，我们可以增强用户体验，并让访问者轻松浏览网站内容，因此它是网页设计的重要组成部分。

示例

让我们看一个使用 CSS 创建水平导航栏的简单示例

<!DOCTYPE html>
<html>
<head>
<style>
/* Basic styling for the navigation bar */
.navbar {
  background-color: #333; /* Background color */
  overflow: hidden; /* Clear floats */
}

/* Style for navigation bar links */
.navbar a {
  float: left; /* Float the links to the left */
  display: block; /* Display links as blocks */
  color: white; /* text color */
  text-align: center; /* Center-align the text */
  padding: 14px 16px; /* Padding around the links */
  text-decoration: none; /* Remove underline from links */
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd; /* Background color on hover */
  color: black; /* Text color on hover */
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#portfolio">Portfolio</a>
  <a href="#contact">Contact</a>
</div>

</body>
</html>

输出

在此示例中，正在创建五个链接的水平导航栏：“主页”、“关于”、“服务”、“作品集”和“联系我们”。我们使用了基本的 CSS 属性来样式化导航栏、链接和悬停效果。您喜欢的颜色、字体、内边距和其他样式可以反映在您的设计中。

CSS 导航栏的局限性

CSS 导航栏有一些局限性，部分如下：

有限的交互复杂性：虽然 CSS 可以产生简单的悬停效果和过渡，但可能需要 JavaScript 来实现更复杂的交互功能，例如具有多级嵌套的下拉菜单。
跨浏览器兼容性：不同的网络浏览器可能会以不同的方式解释 CSS 规则，因此导航栏可能看起来和行为不同。确保所有浏览器之间设计统一可能具有挑战性。
响应式设计挑战：制作一个在各种屏幕和设备上都能良好运行的导航栏可能很困难。通常需要媒体查询和额外的 CSS 规则来修改导航栏在不同屏幕分辨率下的布局。
有限的动画：CSS 可以处理基本动画，但可能需要 JavaScript 或 CSS 库来创建更复杂的动画或效果，例如平滑滚动。
复杂的样式：为导航栏创建高度独特和复杂的设计可能需要复杂的 CSS 技术，这可能难以更新。
可访问性问题：完全由 CSS 制作的导航栏可能并不总是符合屏幕阅读器和其他辅助技术的指南。必须格外小心，以确保所有用户都能访问导航。

尽管存在这些缺点，CSS 导航栏在网页设计中的多功能性和广泛应用仍然存在。然而，它们可能需要 JavaScript 和其他技术来补充，以实现更复杂的功能和无缝的用户体验。

水平导航栏

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

让我们通过一个示例来看看如何创建水平导航栏。

示例

在此示例中，我们添加了 overflow: hidden 属性，以防止 li 元素超出列表范围，display: block 属性将链接显示为块元素，并使整个链接区域可点击。

我们还添加了 float: left 属性，它使用 float 使块元素彼此相邻滑动。

如果我们想要全宽背景颜色，那么我们必须将 background-color 属性添加到 <ul> 而不是 <a> 元素。

<!DOCTYPE html>  
<html>  
<head>  
<style>  
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;  
}  
</style>  
</head>  
<body>  
  
<ul>  
  <li><a class="active" href="#home">Home</a></li>  
  <li><a href="#">Java</a></li>  
  <li><a href="#">HTML</a></li>  
  <li><a href="#">CSS</a></li>  
</ul>  
  
</body>  
</html>  

边框分隔符

我们可以使用 border-right 属性在导航栏的链接之间添加边框。以下示例更清楚地解释了这一点。

示例

<!DOCTYPE html>  
<html>  
<head>  
<style>  
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;  
}  
</style>  
</head>  
<body>  
  
<ul>  
  <li><a class="active" href="#home">Home</a></li>  
  <li><a href="#">Java</a></li>  
  <li><a href="#">HTML</a></li>  
  <li><a href="#">CSS</a></li>  
</ul>  
  
</body>  
</html> 

固定导航栏

当我们滚动页面时，固定导航栏会停留在页面的底部或顶部。请参阅一个示例。

示例

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
</ul>
<h1 style="padding-top: 100px; text-align: center;">Hello World</h1>
<h2 style="padding-bottom: 2000px; text-align: center;">Scroll down the page to see the fixed navigation bar</h2>

</body>
</html>

粘性导航栏

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

此 CSS 属性允许元素在滚动达到某个点时粘滞。根据滚动位置，粘性元素在 fixed 和 relative 属性之间切换。

示例

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h1> Example of sticky navigation bar</h1>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
</ul>
<h1 style="padding-top: 100px; text-align: center;">Hello World</h1>
<h2 style="padding-bottom: 2000px; text-align: center;">Scroll down the page to see the sticky navigation bar</h2>

</body>
</html>

下拉导航栏

以下示例解释了如何在导航栏中创建下拉菜单。

示例

<!DOCTYPE html>
<html>
<head>
<style>

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;
}
</style>
</head>
<body>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">C</a></li>
  <li><a href="#">C++</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">Web-designing</a>
    <div class="dropdown-content">
      <a href="#">HTML</a>
      <a href="#">CSS</a>
      <a href="#">Bootstrap</a>
    </div>
  </li>
</ul>
<h1>Welcome to the javaTpoint.com</h1>
<h2>Example of Dropdown Menu inside a Navigation Bar</h2>
<h3>Move your cursor on the "web-designing" to see the dropdown effect.</h3>

</body>
</html>

垂直导航栏

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

示例

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

<ul>
  <li><a href="#" class = "active">Home</a></li>
  <li><a href = "#">Java</a></li>
  <li><a href = "#">CSS</a></li>
  <li><a href = "#">HTML</a></li>
  <li><a href = "#">Bootstrap</a></li>
</ul>

</body>
</html>

我们可以将链接居中对齐并在它们之间添加边框。请参阅一个示例。

示例

在此示例中，我们向 <li> 和 <a> 添加了 text-align: center; 属性以使链接居中，并向 <ul> 添加了 border 属性以添加边框。我们还将向所有 <li> 元素添加 border-bottom 属性。

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

<ul>
  <li><a href="#" class = "active">Home</a></li>
  <li><a href = "#">Java</a></li>
  <li><a href = "#">CSS</a></li>
  <li><a href = "#">HTML</a></li>
  <li><a href = "#">Bootstrap</a></li>
</ul>

</body>
</html>

全高固定垂直导航栏

我们还可以使用 height: 100%; 和 position: fixed; 属性创建固定的全高侧导航栏。

示例

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<ul>
<li><a href = "#" class = "active">Home</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">CSS</a></li>
<li><a href = "#">HTML</a></li>
<li><a href = "#">Bootstrap</a></li>
</ul>
<div style="margin-left:20%;padding-bottom:2000px;color:blue;">
<h1>Welcome to the javaTpoint.com</h1>
<h2>Side navigation bar with height: 100%; and position: fixed;</h2>
<h3>Scroll the page, and see how the sidenav sticks to the page</h3>

</div>
</body>
</html>

下一个主题CSS 叠加

← prev next →

CSS 导航栏

什么是 CSS 导航栏？

CSS 导航栏的特点

示例

CSS 导航栏的局限性

水平导航栏

示例

边框分隔符

固定导航栏

粘性导航栏

下拉导航栏

垂直导航栏

全高固定垂直导航栏

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 导航栏

什么是 CSS 导航栏？

CSS 导航栏的特点

示例

CSS 导航栏的局限性

水平导航栏

示例

边框分隔符

固定导航栏

粘性导航栏

下拉导航栏

垂直导航栏

全高固定垂直导航栏

相关帖子

CSS 中的 Margin 和 Padding

CSS transition-delay

CSS Outline

CSS Margin

CSS root

CSS 伪元素 before 和 after

CSS font-family

CSS min-height

CSS Slider

CSS Button Hover Effects

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器