导航制作div css

使用DIV和CSS制作导航栏

导航栏是网页设计中常见的元素，使用DIV和CSS可以创建灵活且响应式的导航栏。以下是几种常见的方法：

基础水平导航栏

HTML结构：

<div class="navbar">
  <div class="nav-item"><a href="#">首页</a></div>
  <div class="nav-item"><a href="#">产品</a></div>
  <div class="nav-item"><a href="#">服务</a></div>
  <div class="nav-item"><a href="#">关于</a></div>
</div>

CSS样式：

.navbar {
  display: flex;
  background-color: #333;
  padding: 10px;
}

.nav-item a {
  color: white;
  text-decoration: none;
  padding: 10px 20px;
}

.nav-item a:hover {
  background-color: #555;
}

垂直导航栏

CSS调整：

.navbar {
  display: block;
  width: 200px;
}

.nav-item {
  display: block;
}

响应式导航栏

HTML添加菜单按钮：

<div class="navbar">
  <button class="menu-btn">☰</button>
  <div class="nav-items">
    <div class="nav-item"><a href="#">首页</a></div>
    <div class="nav-item"><a href="#">产品</a></div>
  </div>
</div>

CSS响应式样式：

.menu-btn {
  display: none;
}

@media (max-width: 600px) {
  .menu-btn {
    display: block;
  }
  .nav-items {
    display: none;
  }
  .nav-items.active {
    display: block;
  }
}

JavaScript交互：

document.querySelector('.menu-btn').addEventListener('click', function() {
  document.querySelector('.nav-items').classList.toggle('active');
});

下拉菜单导航

HTML结构：

<div class="nav-item">
  <a href="#">产品</a>
  <div class="dropdown">
    <a href="#">产品1</a>
    <a href="#">产品2</a>
  </div>
</div>

CSS样式：

.dropdown {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
}

.nav-item:hover .dropdown {
  display: block;
}

固定顶部导航栏

CSS添加：

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

这些方法可以根据具体需求组合使用，创建出各种风格的导航栏效果。通过调整CSS属性如颜色、间距、动画等，可以进一步定制导航栏的外观和行为。