使用CSS实现响应式导航菜单

能者

要使用CSS实现响应式导航菜单，可以按照以下步骤进行操作:

1. 创建HTML结构:首先，在HTML文件中创建导航菜单的基本结构。可以使用`<ul>`和`<li>`标签来创建菜单项，并使用`<a>`标签添加链接。
[mw_shl_code=html,true]
<nav>
  <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>
[/mw_shl_code]

2. CSS样式设置:接下来，使用CSS样式将导航菜单进行布局和设计。为了实现响应式效果，可以使用媒体查询（Media Queries）来根据不同屏幕大小应用不同的样式。
[mw_shl_code=css,true]
/* 基本样式 */
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  display: inline-block;
}

.menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .menu li {
    display: block;
  }

  .menu li a {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
  }
}
[/mw_shl_code]

3. 添加导航菜单图标:在小屏幕设备上，常常将导航菜单隐藏，并使用一个图标按钮来触发显示和隐藏菜单。
[mw_shl_code=html,true]
<nav>
  <div class="menu-icon">菜单</div>
  <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>
[/mw_shl_code]

[mw_shl_code=css,true]
/* 添加图标样式 */
.menu-icon {
  display: none;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .menu li {
    display: none;
  }

  .menu-icon {
    display: block;
    padding: 10px;
    color: #000;
    cursor: pointer;
  }
}
[/mw_shl_code]

4. 使用JavaScript切换菜单显示:为了让菜单在小屏幕设备上展开和收起，可以使用JavaScript来实现菜单的切换效果。
[mw_shl_code=javascript,true]
// JavaScript代码
document.querySelector('.menu-icon').addEventListener('click', function() {
  document.querySelector('.menu').classList.toggle('show');
});
[/mw_shl_code]

5. 完成效果:最后，当页面宽度小于768像素时，菜单将变为垂直排列，并通过点击图标按钮来展开和收起菜单。

以上就是使用CSS实现响应式导航菜单的基本步骤。你可以根据需要进行修改和扩展，以适应你的具体设计和布局要求。