总结7种常见的导航条制作实例

7种常见的导航条制作实例

导航条（Navigation Bar）是网页设计中的一个关键元素，它帮助用户在网站内部页面之间进行跳转，一个良好的导航条设计可以极大地提升用户体验和网站的可用性，以下是7种常见的导航条制作实例：

1. 水平导航条

这是最常见的导航条样式，通常位于网页的顶部。

HTML结构：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS样式：

nav ul {
  liststyletype: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
nav li {
  float: left;
}
nav li a {
  display: block;
  textalign: center;
  padding: 14px 16px;
  textdecoration: none;
}

2. 垂直导航条

这种导航条通常位于网页的左侧或右侧。

HTML结构：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS样式：

nav ul {
  liststyletype: none;
  margin: 0;
  padding: 0;
}
nav li {
  marginbottom: 10px;
}
nav li a {
  display: block;
  textdecoration: none;
}

3. 折叠导航条

这种导航条在小屏幕设备上非常有用，可以节省空间。

HTML结构：

<nav>
  <button class="toggle">菜单</button>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS样式：

.menu {
  display: none;
}
.toggle {
  display: block;
}

4. 下拉菜单导航条

这种导航条可以包含多个子菜单，非常适合大型网站。

HTML结构：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul>
        <li><a href="#">产品1</a></li>
        <li><a href="#">产品2</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS样式：

nav ul {
  liststyletype: none;
  margin: 0;
  padding: 0;
}
nav ul ul {
  display: none;
}
nav li:hover > ul {
  display: block;
}

5. 固定导航条

这种导航条在用户滚动页面时会保持在顶部或底部。

HTML结构：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS样式：

nav {
  position: fixed;
  top: 0;
  width: 100%;
}

6. 响应式导航条

这种导航条会根据屏幕大小自动调整布局。

HTML结构：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS样式：

@media screen and (maxwidth: 600px) {
  nav li {
    display: block;
  }
}

7. 全屏导航条

这种导航条会占据整个屏幕，常用于单页应用。

HTML结构：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS样式：

nav {
  height: 100vh;
}