[英]Nav links not hiding when side menu div closes to 0px
I am trying to create a css side menu but when I close the menu, setting div container width to 0, the links are still visible. 我正在尝试创建一个CSS侧面菜单,但是当我关闭菜单时,将div容器的宽度设置为0,链接仍然可见。
Here is the jsfiddle - https://jsfiddle.net/atLvp6k7/ 这是jsfiddle- https: //jsfiddle.net/atLvp6k7/
Interestingly, when I set the menu to the right of the screen I do not have the same problem. 有趣的是,当我将菜单设置在屏幕右侧时,我不会遇到相同的问题。 Do I need to add margin properties to the a items? 我需要向a项目添加边距属性吗?
<div id="side-menu" class="side-nav">
<img id="close-side" src="https://floraisabelle.com/assets/images/hamburger-menu.png?v=aa3f825eb7" alt="">
<a class="" href="#">Hi</a>
<a class="" href="#">Hi</a>
<a class="" href="#">Hi</a>
<a class="" href="#">Hi</a>
</div>
var isOpen = false;
document.getElementById('close-side').addEventListener("click", function(){
if (isOpen) {
document.getElementById("side-menu").style.width = "0px";
document.getElementById("close-side").style.marginLeft = "0px";
isOpen = false;
} else {
document.getElementById("side-menu").style.width = "250px";
document.getElementById("close-side").style.marginLeft = "181px";
isOpen = true;
}
})
.side-nav {
transition: .5s;
height: 100%;
width:0;
background-color: rgba(120, 120, 120, 0.1);
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
#close-side {
margin-left: 0;
margin-top: 5px;
transition: linear .5s;
position: fixed;
}
css CSS
.side-hidden a {
display: none;
}
HTML HTML
<div id="side-menu" class="side-nav side-hidden">
SCRIPT 脚本
var isOpen = false;
document.getElementById('close-side').addEventListener("click", function(){
if (isOpen) {
document.getElementById("side-menu").classList.add('side-hidden');
document.getElementById("side-menu").style.width = "0px";
document.getElementById("close-side").style.marginLeft = "0px";
isOpen = false;
} else {
document.getElementById("side-menu").classList.remove('side-hidden');
document.getElementById("side-menu").style.width = "250px";
document.getElementById("close-side").style.marginLeft = "181px";
isOpen = true;
}
})
I have updated your fiddle also https://jsfiddle.net/atLvp6k7/1/ 我也更新了您的小提琴https://jsfiddle.net/atLvp6k7/1/
there is no need for isOpen Variable 不需要isOpen变量
if(document.getElementById("side-menu").classList.contains('side-hidden')){
alert('isClosed');
}else{
alert('isOpen');
}
you can change the margin of the sidebar instead of width.... 您可以更改边栏的边距而不是宽度。...
here is how to do it - 这是怎么做-
document.getElementById('close-side').addEventListener("click", function(){
if (isOpen) {
document.getElementById("close-side").style.marginLeft = "-100px";
isOpen = false;
} else {
document.getElementById("close-side").style.marginLeft = "0px";
isOpen = true;
}
})
and place the button (close-side) outside the sidebar div 并将按钮(近侧)放在侧边栏div外部
<img id="close-side" src="https://floraisabelle.com/assets/images/hamburger-menu.png?v=aa3f825eb7" alt="">
<div id="side-menu" class="side-nav">
<a class="" href="#">Hi</a>
<a class="" href="#">Hi</a>
<a class="" href="#">Hi</a>
<a class="" href="#">Hi</a>
</div>
now apply following css for the transition effect - 现在在CSS后面应用CSS来实现过渡效果
.side-nav
{
transition: all 0.5s ease;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.