Html 尝试在单击汉堡菜单后显示我的菜单。汉堡包菜单显示在一定的宽度上

当屏幕达到一定大小时，导航列表将隐藏，并显示一个菜单

当你点击汉堡时，它应该显示菜单，当你点击X时，它应该关闭菜单

除下拉列表中显示的菜单外，我正在获得所有效果

代码打开以查看代码

HTML和CSS：

/*汉堡菜单开始*/
.菜单包装{
位置：固定；
排名：0；
右：0；
z指数：1；
可见性：隐藏；
}
.菜单换行器.切换器{
位置：绝对位置；
排名：0；
右：0；
z指数：2；
光标：指针；
宽度：50px；
高度：50px；
不透明度：0；
}
.菜单包装.汉堡包{
位置：绝对位置；
排名：0；
右：0；
z指数：1；
宽度：60px；
高度：60px；
填充：1rem；
背景：#fff；
显示器：flex；
对齐项目：居中；
证明内容：中心；
不透明度：0.75；
}
/*汉堡包线*/
.菜单包装.汉堡包>div{
位置：相对位置；
宽度：100%；
高度：2倍；
背景色：var（--mainColor）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
过渡：所有0.4s缓解；
}
/*顶线和底线*/
.菜单包装.汉堡包>分区：之前，
.菜单包装.汉堡包>分区：之后{
内容：''；
位置：绝对位置；
z指数：1；
顶部：-10px；
宽度：100%；
高度：2倍；
背景：继承；
}
.菜单包装.汉堡包>分区：之后{
顶部：10px；
}
/*把线变成X*/
.menu wrap.toggler:checked+.HAMBERG>div:before，
.menu wrap.toggler:选中+.汉堡>div:之后{
排名：0；
变换：旋转（90度）；
}
.menu wrap.toggler:选中+.HAMBERG>div{
变换：旋转（135度）；
}
/*汉堡包菜单结束*/
@介质（最大宽度：1024px）{
.导航列表{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
}
@介质（最大宽度：900px）{
.导航列表{
显示：块；
利润上限：70像素；
左边缘：63%；
可见性：隐藏；
}
.菜单包装{
能见度：可见；
}
.menu wrap.toggler:选中~.nav列表{
能见度：可见；
}
.主标志{
最大宽度：100%；
} 
}
@介质（最大宽度：500px）{
.主标志{
显示：块；
最大宽度：100%；
宽度：100%；
}
}

这行代码没有正确选择

.nav list

元素

.menu-wrap .toggler:checked ~ .nav-list {
        visibility: visible;
    }

element1~element2选择器匹配前面有element1的element2的匹配项

两个元素必须具有相同的父元素，但element2不必具有相同的父元素 紧跟在元素1之前

.nav list

元素是

.menu wrap

的兄弟元素，而不是子元素

在CSS中，

.nav list

无法了解

.toggler

的状态。最简单的解决方案是使用JavaScript将

.checked

类应用于

.menu wrap

，并添加此CSS以使单击汉堡时菜单可见：

.menu-wrap.checked > .nav-list {
        visibility: visible;
    }

---

这就是我说的。请查看底部CSS以查看更改。我对您的

媒体查询

也有疑问，为什么不从最小尺寸（移动到桌面）设置开始，使用

最小宽度

，而不是

最大宽度

。当屏幕>1024px时，元素会发生什么变化？没有默认设置

$（'.menu wrap'）。单击（函数（）{$（'.nav list'）。切换（）；}）
/*汉堡菜单开始*/
.菜单包装{
位置：固定；
排名：0；
右：0；
z指数：1；
可见性：隐藏；
}
.菜单换行器.切换器{
位置：绝对位置；
排名：0；
右：0；
z指数：2；
光标：指针；
宽度：50px；
高度：50px；
不透明度：0；
}
.菜单包装.汉堡包{
位置：绝对位置；
排名：0；
右：0；
z指数：1；
宽度：60px；
高度：60px；
填充：1rem；
背景色：#000；
显示器：flex；
对齐项目：居中；
证明内容：中心；
不透明度：0.75；
}
/*汉堡包线*/
.菜单包装.汉堡包>div{
位置：相对位置；
宽度：100%；
高度：2倍；
背景色：#fff；
显示器：flex；
对齐项目：居中；
证明内容：中心；
过渡：所有0.4s缓解；
}
/*顶线和底线*/
.菜单包装.汉堡包>分区：之前，
.菜单包装.汉堡包>分区：之后{
内容：''；
位置：绝对位置；
z指数：1；
顶部：-10px；
宽度：100%；
高度：2倍；
背景：继承；
}
.菜单包装.汉堡包>分区：之后{
顶部：10px；
}
/*把线变成X*/
.menu wrap.toggler:checked+.HAMBERG>div:before，
.menu wrap.toggler:选中+.汉堡>div:之后{
排名：0；
变换：旋转（90度）；
}
.menu wrap.toggler:选中+.HAMBERG>div{
变换：旋转（135度）；
}
/*汉堡包菜单结束*/
/*此处所做的更改*/
.导航列表{
显示：无；
利润上限：70像素；
左边缘：63%；
}
.菜单包装{
能见度：可见；
}  
.主标志{
最大宽度：100%；
}