当前位置：首页 > CSS

css网页导航制作

2026-04-02 17:08:16CSS

导航栏基础结构

导航栏通常使用HTML的无序列表<ul>和列表项<li>构建，搭配<a>标签实现链接功能。基础HTML结构如下：

<nav class="navbar">
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

清除默认样式

重置列表和链接的默认样式是第一步：

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.navbar a {
  text-decoration: none;
  color: inherit;
}

水平导航栏

通过Flexbox实现水平布局：

.navbar ul {
  display: flex;
  gap: 20px; /* 项间距 */
  background-color: #333;
  padding: 10px 20px;
}
.navbar a {
  color: white;
  padding: 10px 15px;
}
.navbar a:hover {
  background-color: #555;
}

垂直导航栏

修改Flex方向为垂直排列：

.navbar ul {
  flex-direction: column;
  width: 200px;
}
.navbar a {
  display: block; /* 使整个区域可点击 */
}

响应式导航

使用媒体查询实现移动端适配：

@media (max-width: 768px) {
  .navbar ul {
    flex-direction: column;
    width: 100%;
  }
}

下拉菜单实现

通过CSS伪类和绝对定位创建下拉效果：

<li class="dropdown">
  <a href="#">产品</a>
  <ul class="dropdown-menu">
    <li><a href="#">网页设计</a></li>
    <li><a href="#">开发工具</a></li>
  </ul>
</li>

.dropdown {
  position: relative;
}
.dropdown-menu {
  display: none;
  position: absolute;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-menu {
  display: block;
}

固定定位导航

使导航栏始终停留在视口顶部：

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
body {
  padding-top: 60px; /* 防止内容被导航栏遮挡 */
}

视觉增强效果

添加过渡动画和活动状态指示：

.navbar a {
  transition: background-color 0.3s;
}
.navbar a.active {
  border-bottom: 2px solid #4CAF50;
}

汉堡菜单（移动端）

通过CSS实现可折叠的移动菜单：

<button class="menu-toggle">☰</button>
<nav class="navbar mobile-hidden">
  <!-- 导航内容 -->
</nav>

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
}
@media (max-width: 768px) {
  .menu-toggle { display: block; }
  .mobile-hidden { display: none; }
  .mobile-visible { display: block; }
}

通过JavaScript切换类名实现显示/隐藏：

css网页导航制作

document.querySelector('.menu-toggle').addEventListener('click', function() {
  document.querySelector('.navbar').classList.toggle('mobile-visible');
});