CSS3+Js实现响应式导航条

下面是详细讲解 CSS3+Js 实现响应式导航条的完整攻略。

什么是响应式导航条？

响应式导航条是指适应不同屏幕尺寸的导航条，可以在不同设备上实现优雅的展示。例如，在宽屏显示器上，导航条可以展示为一排按钮；在移动设备上，为了节省空间，导航条可以通过菜单按钮下拉显示子菜单。

实现响应式导航条的必要条件

• 使用 HTML 标签搭建导航条的结构。
• 使用 CSS 样式实现导航条的外观效果。
• 当屏幕宽度小于一定值时，使用 JavaScript 动态改变菜单的展示方式。

HTML 结构

响应式导航条的 HTML 结构通常由一个包含多个导航链接的菜单列表（<ul>）组成。

示例 HTML 结构：

<nav>
  <ul>
    <li><a href="#">链接一</a></li>
    <li><a href="#">链接二</a></li>
    <li><a href="#">链接三</a></li>
    <li><a href="#">链接四</a></li>
  </ul>
  <div class="menu-toggle"><span></span></div>
</nav>

以上代码中，<nav> 元素为导航条容器，<ul> 元素包含了多个列表项，在本例中为导航链接。最后一个列表项是一个菜单切换按钮（div 元素）。

CSS 样式

通过 CSS 样式控制导航栏的外观效果，包括颜色、字体、边框等等。使用媒体查询实现响应式设计，以不同的分辨率呈现不同的外观。

示例 CSS：

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin-right: 20px;
}

nav a {
  color: #000;
  font-size: 16px;
  text-decoration: none;
}

@media screen and (max-width: 900px) {
  nav {
    width: 100%;
  }

  nav ul {
    display: none;
  }

  .menu-toggle {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    width: 100%;
    height: 4px;
    background-color: #000;
    border-radius: 2px;
    margin-bottom: 4px;
  }
}

以上代码定义了默认情况下的导航条样式和当屏幕宽度小于 900px 时的样式。在屏幕宽度小于 900px 时，菜单列表将隐藏，菜单切换按钮将显示。

JavaScript

需要使用 JavaScript 动态切换菜单的可见性。可以在菜单切换按钮（div 元素）上绑定单击事件，通过修改菜单列表的 CSS 类名，实现菜单的显示或隐藏。

示例 JavaScript 代码：

var menuToggle = document.querySelector('.menu-toggle');
var nav = document.querySelector('nav ul');

menuToggle.addEventListener('click', function() {
  nav.classList.toggle('active');
});

以上代码为菜单切换按钮绑定了单击事件，菜单列表的 active CSS 类名将被切换，从而实现菜单的显示或隐藏。

示例

下面是两个使用 CSS3+Js 实现的响应式导航条的示例：

1. CodePen 示例 - 这是一个简单的响应式导航条示例，包含菜单列表和菜单切换按钮。
2. Bootstrap 示例 - 这是 Bootstrap 框架的官方响应式导航条的示例，使用了响应式设计，可以适应移动设备屏幕尺寸。

以上是 CSS3+Js 实现响应式导航条的完整攻略。