我的导航图标未关闭

时间：2016-08-04 14:04:22

标签： javascript html css

您好我正在尝试创建侧导航，我无法通过“onclick（）”的第二个功能来关闭菜单

导航打开完美，但不会关闭。 这是我的小提琴，我只是希望获得有关添加onlick功能的帮助，当再次单击导航图标时关闭导航。

function myFunction(x) {
  x.classList.toggle("change");
  document.getElementById("mySidenav").style.width = "220px";
  document.getElementById("Content").style.paddingLeft = "0px";
  document.body.style.opacity = "0.1";

}
/* The side navigation menu */

.sidenav {
  height: 100%;
  width: 0;
  /* 0 width - change this with JavaScript */
  position: fixed;
  z-index: 400;
  right: 0;
  background-color: #0F0F0F;
  overflow-x: hidden;
  padding-top: 90px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  opacity: 0.8;
}
/* The navigation menu links */

.sidenav a {
  padding: 8px 8px 8px 10px;
  text-decoration: none;
  font-size: 18px;
  text-align: right;
  vertical-align: middle;
  justify-content: center;
  display: flex;
  line-height: 20px;
  color: #FFFFFF;
  transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */

.sidenav a:hover,
.offcanvas a:focus {
  color: #00CB10;
  text-decoration: underline;
}
.menu-icon {
  display: inline-block;
  position: fixed;
  z-index: 500;
  cursor: pointer;
  margin-right: 15px;
  margin-top: 15px;
  margin-left: 96%;
}
.bar1,
.bar2,
.bar3 {
  width: 30px;
  height: 4px;
  background-color: #0F0F0F;
  border-radius: 10px;
  margin: 6px 0;
  transition: 0.4s;
}
/* Rotate first bar */

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 5px);
  transform: rotate(-45deg) translate(-9px, 5px);
}
/* Fade out the second bar */

.change .bar2 {
  opacity: 0;
}
/* Rotate last bar */

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -6px);
  transform: rotate(45deg) translate(-8px, -6px);
}
<div id="Menu" class="menu-icon" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div id="mySidenav" class="sidenav">
  <!--Start Side Nav-->
  <a href="#">Our Story</a>
  <a href="#">Products</a>
  <a href="#">Contact Us</a>
  <a href="#">Login/Sign up</a>
</div>
<!---->

4 个答案:

答案 0 :(得分：1)

您无需在JS中设置宽度。当菜单打开时，您正在切换一个额外的类，您可以使用它。

另一点是你不应该改变身体的不透明度（它也会影响菜单），而只是主要的内容div。 或者显示具有固定位置（100％宽度和高度，背景和不透明度）的叠加div，以便创建禁用内容的效果。

在我的例子中，我评论了不必要的js行，并添加了somme CSS：

function myFunction(x) {
  x.classList.toggle("change");
  //document.getElementById("mySidenav").style.width = "220px";
  //document.getElementById("Content").style.paddingLeft = "0px";
  document.body.style.opacity = "0.1";

}
/* The side navigation menu */

.sidenav {
  height: 100%;
  width: 0;
  /* 0 width - change this with JavaScript */
  position: fixed;
  z-index: 400;
  right: 0;
  background-color: #0F0F0F;
  overflow-x: hidden;
  padding-top: 90px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  opacity: 0.8;
}
/* The navigation menu links */

.sidenav a {
  padding: 8px 8px 8px 10px;
  text-decoration: none;
  font-size: 18px;
  text-align: right;
  vertical-align: middle;
  justify-content: center;
  display: flex;
  line-height: 20px;
  color: #FFFFFF;
  transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */

.sidenav a:hover,
.offcanvas a:focus {
  color: #00CB10;
  text-decoration: underline;
}
.menu-icon {
  display: inline-block;
  position: fixed;
  z-index: 500;
  cursor: pointer;
  margin-right: 15px;
  margin-top: 15px;
  margin-left: 96%;
}
.bar1,
.bar2,
.bar3 {
  width: 30px;
  height: 4px;
  background-color: #0F0F0F;
  border-radius: 10px;
  margin: 6px 0;
  transition: 0.4s;
}
/* Rotate first bar */

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 5px);
  transform: rotate(-45deg) translate(-9px, 5px);
}
/* Fade out the second bar */

.change .bar2 {
  opacity: 0;
}
/* Rotate last bar */

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -6px);
  transform: rotate(45deg) translate(-8px, -6px);
}
.change + .sidenav {
  width: 220px;
}
<div id="Menu" class="menu-icon" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div id="mySidenav" class="sidenav">
  <!--Start Side Nav-->
  <a href="#">Our Story</a>
  <a href="#">Products</a>
  <a href="#">Contact Us</a>
  <a href="#">Login/Sign up</a>
</div>
<!---->

答案 1 :(得分：1)

我添加了名为class的新toggleClass，我提供了width:220px，我评论了document.getElementById("mySidenav").style.width = "220px"

working fiddle

答案 2 :(得分：0)

如果您尝试在javascript中设置宽度，则可以检查菜单是否打开。

然而，在这种情况下，上述答案更合适。

＆＃13;
＆＃13; 
function myFunction(x) {
  x.classList.toggle("change");
  var width=document.getElementById("mySidenav").style.width;
  if(width!="220px" || width=="") 
  {
     document.getElementById("mySidenav").style.width="220px";
  }
  else
  {
     document.getElementById("mySidenav").style.width="0px";
  }
  document.getElementById("Content").style.paddingLeft = "0px";
  document.body.style.opacity = "0.1";

}
＆＃13; 
/* The side navigation menu */

.sidenav {
  height: 100%;
  width: 0;
  /* 0 width - change this with JavaScript */
  position: fixed;
  z-index: 400;
  right: 0;
  background-color: #0F0F0F;
  overflow-x: hidden;
  padding-top: 90px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  opacity: 0.8;
}
/* The navigation menu links */

.sidenav a {
  padding: 8px 8px 8px 10px;
  text-decoration: none;
  font-size: 18px;
  text-align: right;
  vertical-align: middle;
  justify-content: center;
  display: flex;
  line-height: 20px;
  color: #FFFFFF;
  transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */

.sidenav a:hover,
.offcanvas a:focus {
  color: #00CB10;
  text-decoration: underline;
}
.menu-icon {
  display: inline-block;
  position: fixed;
  z-index: 500;
  cursor: pointer;
  margin-right: 15px;
  margin-top: 15px;
  margin-left: 96%;
}
.bar1,
.bar2,
.bar3 {
  width: 30px;
  height: 4px;
  background-color: #0F0F0F;
  border-radius: 10px;
  margin: 6px 0;
  transition: 0.4s;
}
/* Rotate first bar */

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 5px);
  transform: rotate(-45deg) translate(-9px, 5px);
}
/* Fade out the second bar */

.change .bar2 {
  opacity: 0;
}
/* Rotate last bar */

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -6px);
  transform: rotate(45deg) translate(-8px, -6px);
}
＆＃13; 
<div id="Menu" class="menu-icon" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div id="mySidenav" class="sidenav">
  <!--Start Side Nav-->
  <a href="#">Our Story</a>
  <a href="#">Products</a>
  <a href="#">Contact Us</a>
  <a href="#">Login/Sign up</a>
</div>
<!---->
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

设置中缺少的关键是#mySidenav需要能够在状态以及 .menu-icon之间切换。

因此，您需要设置myFunction()，以便切换上的.change类 .menu-icon 和 {{ 1}}。 

#mySidenav
function myFunction() {
var x = document.getElementsByClassName('menu-icon')[0]; 
var mySidenav = document.getElementById('mySidenav');

x.classList.toggle('change');
mySidenav.classList.toggle('change');
}

var menuIcon = document.getElementsByClassName('menu-icon')[0];
menuIcon.addEventListener('click',myFunction,false);
/* The side navigation menu */

.sidenav {
height: 100%;
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
z-index: 400;
right: 0;
background-color: #0F0F0F;
overflow-x: hidden;
padding-top: 90px;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
opacity: 0.8;
}
/* The navigation menu links */

.sidenav a {
padding: 8px 8px 8px 10px;
text-decoration: none;
font-size: 18px;
text-align: right;
vertical-align: middle;
justify-content: center;
display: flex;
line-height: 20px;
color: #FFFFFF;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */

.sidenav a:hover,
.offcanvas a:focus {
color: #00CB10;
text-decoration: underline;
}
.menu-icon {
display: inline-block;
position: fixed;
z-index: 500;
cursor: pointer;
margin-right: 15px;
margin-top: 15px;
margin-left: 96%;
}
.bar1,
.bar2,
.bar3 {
width: 30px;
height: 4px;
background-color: #0F0F0F;
border-radius: 10px;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */

.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 5px);
transform: rotate(-45deg) translate(-9px, 5px);
background-color: rgb(255,255,255);
}
/* Fade out the second bar */

.change .bar2 {
opacity: 0;
}
/* Rotate last bar */

.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -6px);
transform: rotate(45deg) translate(-8px, -6px);
background-color: rgb(255,255,255);
}

#mySidenav.change {
width: 220px;
}

#Content.change {
padding-left: 0;
}

body.change {
opacity: 0.1;
}

相关问题
最新问题