使用input复选框checkbox选中和取消控制响应式导航显示或隐藏效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用checkbox复选框来控制导航的显示和隐藏从而制作一个响应式菜单导航效果.许多导航菜单（特别是响应式菜单）是使用HTML，CSS和Javascript的组合创建的。 这个简单的CSS方法将证明Javascript并不总是必要的！

checkbox复选框有两种状态，一种是选中，一种是取消选中，下面介绍如何根据这两种状态来实现菜单的控制效果。

思路

当屏幕为移动设备时，隐藏导航栏列表项目，显示菜单按钮。 点击菜单按钮， 复选框变成选中状态checked，并且显示导航栏列表项目， 再次点击菜单按钮，复选框变成取消选中状态，同时隐藏导航栏列表项目， 同理给菜单按钮（电脑时隐藏）checked 选择器 实现， checked的触发时动态修改菜单按钮样式。 这样就可以实现导航的控制

css 媒体查询

使导航栏响应要使用 css 媒体查询技术， 让我们的导航栏响应，以便它可以适应不同的屏幕尺寸，为此我们将使用 css 媒体查询。 在移动屏幕上，我们将有一个汉堡菜单，该菜单仅在具有小屏幕尺寸的移动设备上显示。

关键css代码

<style>
    
#check{
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  z-index: 90000;
  cursor: pointer;
  opacity: 0;
  display: none;
}

#check:checked ~ .hmenu-container .hmenu div{
  background-color: transparent;
}

#check:checked ~ .hmenu-container .hmenu div::before{
  transform: translateY(0) rotate(-45deg);
}

#check:checked ~ .hmenu-container .hmenu div::after{
  transform: translateY(0) rotate(45deg);
}
#check:checked ~ .nav-btn{
    transform: translateX(0);
  }

</style>

这个css代码主要实现了复选框按钮选中状态下，菜单按钮样式的改变和导航菜单的显示或隐藏效果(translateX值的改变)