javascript - 低宽度的汉堡菜单下拉菜单
问题描述
我的导航栏很少有项目和汉堡包图标,应该以低宽度显示,此时导航栏项目应该隐藏。使用按钮,我想将它们的显示更改为 bo flex 并将 flex-direction 设置为列,因此项目将垂直显示。我正在尝试使用此功能,您能给我一些建议吗?
这是代码:
let btn = document.getElementById('btn');
let menu = document.getElementsByClassName('hammburger-links')[0];
btn.addEventListener('click', function() {
menu.classList.toggle('openmenu');
});
.slider .hammburger-menu {
width: 16px;
height: 14px;
border: 0;
display: none;
position: absolute;
}
@media (max-width: 1425px) {
.slider .hammburger-menu {
display: inline;
}
.slider .hammburger-menu div {
background-color: #202124;
display: block;
width: 16px;
height: 2px;
margin: 4px 0;
}
}
.slider .hammburger-links {
padding: 0 1.250em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.slider .hammburger-links a {
padding: 0 1.500em;
text-decoration: none;
font-family: "Helvetica", Arial;
font-size: 11px;
color: #a6adb4;
}
@media (max-width: 1425px) {
.slider .hammburger-links a {
display: none;
}
}
.slider .hammburger-links .under-home {
position: absolute;
top: 2.5em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background: #F6F8F9;
min-width: 12.5em;
min-height: 12.5em;
z-index: 1;
display: none;
}
.slider .hammburger-links .under-home a {
margin: 10px 0;
}
.slider .hammburger-links.openhome {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.slider .hammburger-links.openmenu a {
display: flex;
flex-direction: column;
}
<div class="slider">
<div class="hammburger-menu" id="btn">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="hammburger-links" id="menu">
<a href="" id="home">HOME</a>
<div class="under-home">
<a href="">WORLD NEWS</a>
<a href="">TRAVEL</a>
<a href="">TECHNOLOGY</a>
<a href="">CITY</a>
<a href="">CULTURE</a>
<a href="">MORE...</a>
</div>
<a href="">DISCOVERY</a>
<a href="">PHOTOS</a>
<a href="">CONTACT</a>
<img src="images/navbar-img.png" alt="">
</div>
</div>
解决方案
document.getElementsByClassName
返回一个数组。let menu = document.getElementsByClassName('hammburger-links')[0];
所以你想通过id(菜单)来做或获取元素。
这样做应该将所需的类添加到 #menu 元素,但您的 CSS 也有问题。您的 CSS 选择器.slider .hammburger-links .openmenu
没有选择任何内容。该选择器查找一个元素 .openmenu,它是元素 .hammburger-links 的后代,它是元素 .slider 的后代。您需要属于 hammburger-links和openmenu 类的元素。选择器如下所示:.slider .hammburger-links.openmenu
但是,这仍然没有显示菜单元素。我发现再次将选择器更改为目标子锚元素.slider .hammburger-links.openmenu a
(
推荐阅读
- git - 创建 GIT 工作树的问题
- javascript - 'this' 关键字在我绑定后仍然引用窗口
- android - SharedFlow 和 StateFlow 的主要区别
- python - 控制台关闭后保持 Python 程序运行
- delphi - Fastreport : 详细数据:限制记录数
- javascript - fs.WriteFile() 返回 NULL 并且不写入 JSON 文件
- google-analytics - Google Analytics(分析)在细分中显示令人困惑的数据
- azure - 从 AzureDevOps Replace Tokens 在 appsettings 中设置 JSON 键
- arrays - 关于 C 数组语法的问题
- python - 从组件类访问复合类字段