汉堡导航，如何隐藏/显示链接

时间：2018-01-10 15:53:15

标签： javascript jquery html css navbar

所以我有一个带有动画汉堡包的导航栏，当我点击汉堡包时，我想显示导航链接，默认情况下是隐藏的。

如果汉堡包是X，我怎么包括closeNav功能呢？如果我只是将它插入openNav函数后面，那么根本没有任何显示，所以这显然不是正确的方法。

function openNav() {
    document.getElementById("navbar--middle").style.display = "block";
}

function closeNav() {
    document.getElementById("navbar--middle").style.display = "none";
}

function myFunction(x) {
    x.classList.toggle("change");
}
.navbar--middle {
  display: none;
  margin-left: 26%;
  position: fixed;
  display: none;
  & a {
    display: inline-flex;
    padding: 8px 8px 8px 32px;
  }
}

.hamburger {
  display: inline-block;
  margin-top: 45px;
  cursor: pointer;
}
.icon1 {
 width: 35px;
 height: 5px;
 background-color: black;
 margin: 6px 0;
 border-radius: 5px;
 transition: 0.4s;
}
.icon2 {
 width: 35px;
 height: 5px;
 background-color: black;
 margin: 6px 0;
 border-radius: 5px;
 transition: 0.4s;
}
.icon3 {
 width: 35px;
 height: 5px;
 background-color: black;
 margin: 6px 0;
 border-radius: 5px;
 transition: 0.4s;
}

/* Rotate first bar */
.change .icon1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .icon2 {
    opacity: 0;
}

/* Rotate last bar */
.change .icon3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}
<div class="navbar--middle" id="navbar--middle">
  <a href="#">Home</a>
  <a href="#" id="btn--toepassing">Toepassing</a>
  <a href="#" id="btn--specificaties">Specificaties</a>
  <a href="#" id="btn--referenties">Referenties</a>
  <a href="#" id="btn--container--dealers">Dealers</a>
</div>

  <div class="navbar--right">
    <div class="hamburger" id="hamburger" onclick="openNav(); myFunction(this)">
      <div class="icon1"></div>
      <div class="icon2"></div>
      <div class="icon3"></div>
    </div>
  </div>

6 个答案:

答案 0 :(得分：0)

您希望在类中包含导航栏的状态，通常这是通过open和close完成的，然后一旦您单击汉堡包按钮，您可以检查以查看当前状态并执行适当的代码。

https://api.jquery.com/addclass/

https://api.jquery.com/removeclass/

答案 1 :(得分：0)

为什么不添加一个打开的类，您可以在'myFunction'中切换。 并设置要显示的样式：该类的块？

答案 2 :(得分：0)

这对我有用：

function openNav() {
    document.getElementById("navbar--middle").style.display = "block";
}

function closeNav() {
    document.getElementById("navbar--middle").style.display = "none";
}

function myFunction(x) {
    x.classList.toggle("change");
    if(x.classList.contains("change")) {
    	openNav();
    } else {
    	closeNav();
    }
}
.navbar--middle {
  display: none;
  margin-left: 26%;
  position: fixed;
  display: none;
  & a {
    display: inline-flex;
    padding: 8px 8px 8px 32px;
  }
}

.hamburger {
  display: inline-block;
  margin-top: 45px;
  cursor: pointer;
}
.icon1 {
 width: 35px;
 height: 5px;
 background-color: black;
 margin: 6px 0;
 border-radius: 5px;
 transition: 0.4s;
}
.icon2 {
 width: 35px;
 height: 5px;
 background-color: black;
 margin: 6px 0;
 border-radius: 5px;
 transition: 0.4s;
}
.icon3 {
 width: 35px;
 height: 5px;
 background-color: black;
 margin: 6px 0;
 border-radius: 5px;
 transition: 0.4s;
}

/* Rotate first bar */
.change .icon1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .icon2 {
    opacity: 0;
}

/* Rotate last bar */
.change .icon3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}
<div class="navbar--middle" id="navbar--middle">
  <a href="#">Home</a>
  <a href="#" id="btn--toepassing">Toepassing</a>
  <a href="#" id="btn--specificaties">Specificaties</a>
  <a href="#" id="btn--referenties">Referenties</a>
  <a href="#" id="btn--container--dealers">Dealers</a>
</div>

  <div class="navbar--right">
    <div class="hamburger" id="hamburger" onclick="myFunction(this)">
      <div class="icon1"></div>
      <div class="icon2"></div>
      <div class="icon3"></div>
    </div>
  </div>

答案 3 :(得分：0)

使用javascript单击切换一个类（在父元素上）会更好。过渡应该由CSS处理，并且通过单个父类切换，您可以使用1个类来处理所有样式更改。

还要注意汉堡包图标上的z-index。此规则将图标保留在最高层，并始终可单击。

function toggleNav() {
  document.getElementById("body-id").classList.toggle('nav-toggle-class');
}
.navbar--middle {
  padding-top: 80px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background: red;
  
   opacity: 0;
   pointer-events: none;
   transform: translateX(-100%);
   transition: all 0.4s ease; 
}

body.nav-toggle-class .navbar--middle {
   opacity: 1;
   pointer-events: all;
   transform: translateX(0);
}


.hamburger {
  display: block;
  cursor: pointer;
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 1;
}
.icon1 {
 width: 35px;
 height: 5px;
 background-color: black;
 margin: 6px 0;
 border-radius: 5px;
 transition: 0.4s;
}
.icon2 {
 width: 35px;
 height: 5px;
 background-color: black;
 margin: 6px 0;
 border-radius: 5px;
 transition: 0.4s;
}
.icon3 {
 width: 35px;
 height: 5px;
 background-color: black;
 margin: 6px 0;
 border-radius: 5px;
 transition: 0.4s;
}

/* Rotate first bar */
.nav-toggle-class .icon1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.nav-toggle-class .icon2 {
    opacity: 0;
}

/* Rotate last bar */
.nav-toggle-class .icon3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

  .navbar--middle a {
    display: block;
    padding: 8px 8px 8px 32px;
  }
<body id="body-id" class="">

<div class="navbar--middle" id="navbar--middle">
  <a href="#">Home</a>
  <a href="#" id="btn--toepassing">Toepassing</a>
  <a href="#" id="btn--specificaties">Specificaties</a>
  <a href="#" id="btn--referenties">Referenties</a>
  <a href="#" id="btn--container--dealers">Dealers</a>
</div>

  <div class="navbar--right">
    <div class="hamburger" id="hamburger" onclick="toggleNav();">
      <div class="icon1"></div>
      <div class="icon2"></div>
      <div class="icon3"></div>
    </div>
  </div>
  
 </body>

答案 4 :(得分：0)

您可以在菜单和汉堡包上切换类，然后调整CSS中的样式。

...示例

＆＃13;
＆＃13; 
var navbarBurger = document.getElementById('hamburger');

navbarBurger.addEventListener('click', function() {

  var menu = document.getElementById("navbar--middle");

  navbarBurger.classList.toggle('is-active');
  menu.classList.toggle('is-active');

});
＆＃13; 
.navbar--middle {
  display: none;
  margin-left: 26%;
  position: fixed;
  display: none;
  & a {
    display: inline-flex;
    padding: 8px 8px 8px 32px;
  }
}

.navbar--middle.is-active {
  display: block;
}

.hamburger {
  display: inline-block;
  margin-top: 45px;
  cursor: pointer;
}

.icon1 {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  border-radius: 5px;
  transition: 0.4s;
}

.icon2 {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  border-radius: 5px;
  transition: 0.4s;
}

.icon3 {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  border-radius: 5px;
  transition: 0.4s;
}


/* Rotate first bar */

.is-active .icon1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}


/* Fade out the second bar */

.is-active .icon2 {
  opacity: 0;
}


/* Rotate last bar */

.is-active .icon3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
＆＃13; 
<div class="navbar--middle" id="navbar--middle">
  <a href="#">Home</a>
  <a href="#" id="btn--toepassing">Toepassing</a>
  <a href="#" id="btn--specificaties">Specificaties</a>
  <a href="#" id="btn--referenties">Referenties</a>
  <a href="#" id="btn--container--dealers">Dealers</a>
</div>

<div class="navbar--right">
  <div class="hamburger" id="hamburger">
    <div class="icon1"></div>
    <div class="icon2"></div>
    <div class="icon3"></div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：0)

您必须将 element.style.display 的 if else 条件设置如下

var hamburger = document.getElementById('hamburger');
var menu = document.getElementById('navbar--middle');
menu.style.display = "none";
hamburger.addEventListener('click', function() {
  this.classList.toggle("change");
  if (menu.style.display === "none") {
    menu.style.display = "block";
  } else {
    menu.style.display = "none";
  }
})
.navbar--middle {
  display: none;
  margin-left: 26%;
  position: fixed;
  display: none;
}

.navbar--middle a {
  display: inline-flex;
  padding: 8px 8px 8px 32px;
}

.hamburger {
  display: inline-block;
  margin-top: 45px;
  cursor: pointer;
}

.icon1 {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  border-radius: 5px;
  transition: 0.4s;
}

.icon2 {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  border-radius: 5px;
  transition: 0.4s;
}

.icon3 {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  border-radius: 5px;
  transition: 0.4s;
}


/* Rotate first bar */

.change .icon1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}


/* Fade out the second bar */

.change .icon2 {
  opacity: 0;
}


/* Rotate last bar */

.change .icon3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
<div class="navbar--middle" id="navbar--middle">
  <a href="#">Home</a>
  <a href="#" id="btn--toepassing">Toepassing</a>
  <a href="#" id="btn--specificaties">Specificaties</a>
  <a href="#" id="btn--referenties">Referenties</a>
  <a href="#" id="btn--container--dealers">Dealers</a>
</div>

<div class="navbar--right">
  <div class="hamburger" id="hamburger">
    <div class="icon1"></div>
    <div class="icon2"></div>
    <div class="icon3"></div>
  </div>
</div>

相关问题
最新问题