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

总结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;
}
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。