汉堡菜单滑动

时间：2019-05-23 08:25:27

标签： javascript jquery html css

我正在尝试创建一个与此网站上的菜单类似的菜单：http://sterling.it/en/

我希望菜单从左向右滑动，然后也消失向左滑动。以下是我到目前为止编写的代码，但是无法正常工作。菜单第一次滑动，但之后不再滑动。如果有人可以帮助我，我将不胜感激。提前致谢！ 

$(document).ready(function() {
  $(".menuTrigger").click(function() {
    $(this).toggleClass("active");

    /* Check if the icon does not have class active */
    if (!$(this).hasClass("active")) {
      /* Do something, for example add class color-icon that changes the color of the hamburguer,
        show an alert... */
      $(".menuTrigger .hamburger").addClass("non-active");
      $("#hamburgerMenu").removeClass("active");

    } else {
      $("menuTrigger .hamburger").removeClass("non-active");
      $("#hamburgerMenu").addClass("active");
      if ($(this).hasClass("active")) {
        $("#hamburgerMenu").animate({
          width: "200"
        });
      }
    }
  });
});
body {
  background: pink;
}

.hamburger {
  width: 30px;
  height: 3px;
  background: black;
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
}

.hamburger:before,
.hamburger:after {
  content: "";
  position: absolute;
  width: 15px;
  height: 3px;
  background: black;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
}

.hamburger:after {
  top: 8px;
  left: 50%;
}

.hamburger:before {
  top: -8px;
  left: 0%;
}

.menuTrigger:hover .hamburger:after {
  left: 0%;
}

.menuTrigger:hover .hamburger:before {
  left: 50%;
}

.menuTrigger.active .hamburger {
  background: rgba(0, 0, 0, 0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}

.menuTrigger.active .hamburger:before {
  top: 0px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  -webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}

.menuTrigger.active .hamburger:after {
  top: 0px;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
  -webkit-transition: top .2s ease-in-out, background-color .3s ease-in-out .2s;
  transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, background-color .3s ease-in-out .2, box-shadow .3s ease-in-out .2s;
  transition: top .2s ease-in-out, background-color .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}

.menuTrigger.active .hamburger:after {
  top: 0px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}

.menuTrigger {
  position: relative;
  transform: transition(-50%, -50%);
  width: 60px;
  height: 40px;
  align-items: center;
  z-index: 1000;
  cursor: pointer;
}

.hamburgerMenuTrigger {
  height: 100vh;
}

#hamburgerMenu {
  position: fixed;
  top: 0;
  height: 100%;
  width: 0px;
  padding: 60px;
  background-color: white;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
}

#hamburgerMenu.active {
  opacity: 1;
  visibility: visible;
}

header nav a {
  text-decoration: none;
  color: rgb(88, 102, 110);
  font-size: 20px;
  font-weight: bold;
  padding: 7px;
}

header nav li {
  list-style-type: none;
  padding: 20px 0;
}

header nav li span {
  font-size: 16px;
  padding-right: 30px;
}

header {
  display: block;
}

header nav {
  padding-top: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hamburgerMenuTrigger">
  <div class="menuTrigger" id="menuTriggerBtn">
    <div class="hamburger" id="hamburgerBtn"></div>
  </div>
  <div id="hamburgerMenu">
    <nav class="hamburgereMenu-Nav">
      <ul class="hamburgerMenu-Ul">
        <li class="hamburgerMenu-nav-item  hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link  hamburgerMenu-menu" href=""><span>01</span></a></li>
        <li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link  hamburgerMenu-menu" href=""><span>02</span></a></li>
        <li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link  hamburgerMenu-menu" href=""><span>03</span></a></li>
        <li class="hamburgerMenu-nav-item  hamburgerMenu-right-li"><a class="hamburgereMenu-nav-link  hamburgerMenu-menu" href=""><span>04</span></a></li>
      </ul>
    </nav>
  </div>
</div>

2 个答案:

答案 0 :(得分：0)

您太快地删除了活动的类，因此设置了不透明度和可视性以隐藏菜单。在宽度上添加动画并在回调函数上隐藏菜单会反转您的外观动画。

$(document).ready(function() {
  $(".menuTrigger").click(function() {
    $(this).toggleClass("active");

    /* Check if the icon does not have class active */
    if (!$(this).hasClass("active")) {
      /* Do something, for example add class color-icon that changes the color of the hamburguer,
        show an alert... */
      $(".menuTrigger .hamburger").addClass("non-active");
      $("#hamburgerMenu").animate({
         width: "0"
      }, function() {
         $("#hamburgerMenu").removeClass("active");
      });
    } else {
      $("menuTrigger .hamburger").removeClass("non-active");
      $("#hamburgerMenu").addClass("active");
      if ($(this).hasClass("active")) {
        $("#hamburgerMenu").animate({
          width: "200"
        });
      }
    }
  });
});
body {
  background: pink;
}

.hamburger {
  width: 30px;
  height: 3px;
  background: black;
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
}

.hamburger:before,
.hamburger:after {
  content: "";
  position: absolute;
  width: 15px;
  height: 3px;
  background: black;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
}

.hamburger:after {
  top: 8px;
  left: 50%;
}

.hamburger:before {
  top: -8px;
  left: 0%;
}

.menuTrigger:hover .hamburger:after {
  left: 0%;
}

.menuTrigger:hover .hamburger:before {
  left: 50%;
}

.menuTrigger.active .hamburger {
  background: rgba(0, 0, 0, 0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}

.menuTrigger.active .hamburger:before {
  top: 0px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  -webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}

.menuTrigger.active .hamburger:after {
  top: 0px;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
  -webkit-transition: top .2s ease-in-out, background-color .3s ease-in-out .2s;
  transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, background-color .3s ease-in-out .2, box-shadow .3s ease-in-out .2s;
  transition: top .2s ease-in-out, background-color .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}

.menuTrigger.active .hamburger:after {
  top: 0px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}

.menuTrigger {
  position: relative;
  transform: transition(-50%, -50%);
  width: 60px;
  height: 40px;
  align-items: center;
  z-index: 1000;
  cursor: pointer;
}

.hamburgerMenuTrigger {
  height: 100vh;
}

#hamburgerMenu {
  position: fixed;
  top: 0;
  height: 100%;
  width: 0px;
  padding: 60px;
  background-color: white;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
}

#hamburgerMenu.active {
  opacity: 1;
  visibility: visible;
}

header nav a {
  text-decoration: none;
  color: rgb(88, 102, 110);
  font-size: 20px;
  font-weight: bold;
  padding: 7px;
}

header nav li {
  list-style-type: none;
  padding: 20px 0;
}

header nav li span {
  font-size: 16px;
  padding-right: 30px;
}

header {
  display: block;
}

header nav {
  padding-top: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hamburgerMenuTrigger">
  <div class="menuTrigger" id="menuTriggerBtn">
    <div class="hamburger" id="hamburgerBtn"></div>
  </div>
  <div id="hamburgerMenu">
    <nav class="hamburgereMenu-Nav">
      <ul class="hamburgerMenu-Ul">
        <li class="hamburgerMenu-nav-item  hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link  hamburgerMenu-menu" href=""><span>01</span></a></li>
        <li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link  hamburgerMenu-menu" href=""><span>02</span></a></li>
        <li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link  hamburgerMenu-menu" href=""><span>03</span></a></li>
        <li class="hamburgerMenu-nav-item  hamburgerMenu-right-li"><a class="hamburgereMenu-nav-link  hamburgerMenu-menu" href=""><span>04</span></a></li>
      </ul>
    </nav>
  </div>
</div>

答案 1 :(得分：0)

这里发生的是动画没有在第一个条件下被调用，当您在完成动画后调用它时，应该删除并添加活动类。

我对您的代码做了一些更改，

$(document).ready(function() {
  $(".menuTrigger").click(function() {
    $(this).toggleClass("active");

    /* Check if the icon does not have class active */
    if (!$(this).hasClass("active")) {
      /* Do something, for example add class color-icon that changes the color of the hamburguer,
        show an alert... */
      $("#hamburgerMenu").animate({
        width: "0",
        opacity: "0" // We are reducing opacity as it looks good. :)
      }, 
      // This is the callback when the animate is completed.
      {
        complete: function() {
          $(".menuTrigger .hamburger").addClass("non-active");
          $("#hamburgerMenu").removeClass("active");
        }
      });
    } else {
      $("menuTrigger .hamburger").removeClass("non-active");
      $("#hamburgerMenu").addClass("active");
      if ($(this).hasClass("active")) {
        $("#hamburgerMenu").animate({
          width: "200",
          opacity: "1"
        });
      }
    }
  });
});
body {
  background: pink;
}

.hamburger {
  width: 30px;
  height: 3px;
  background: black;
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
}

.hamburger:before,
.hamburger:after {
  content: "";
  position: absolute;
  width: 15px;
  height: 3px;
  background: black;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
}

.hamburger:after {
  top: 8px;
  left: 50%;
}

.hamburger:before {
  top: -8px;
  left: 0%;
}

.menuTrigger:hover .hamburger:after {
  left: 0%;
}

.menuTrigger:hover .hamburger:before {
  left: 50%;
}

.menuTrigger.active .hamburger {
  background: rgba(0, 0, 0, 0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}

.menuTrigger.active .hamburger:before {
  top: 0px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  -webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}

.menuTrigger.active .hamburger:after {
  top: 0px;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
  -webkit-transition: top .2s ease-in-out, background-color .3s ease-in-out .2s;
  transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, background-color .3s ease-in-out .2, box-shadow .3s ease-in-out .2s;
  transition: top .2s ease-in-out, background-color .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}

.menuTrigger.active .hamburger:after {
  top: 0px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
  transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}

.menuTrigger {
  position: relative;
  transform: transition(-50%, -50%);
  width: 60px;
  height: 40px;
  align-items: center;
  z-index: 1000;
  cursor: pointer;
}

.hamburgerMenuTrigger {
  height: 100vh;
}

#hamburgerMenu {
  position: fixed;
  top: 0;
  height: 100%;
  width: 0px;
  padding: 60px;
  background-color: white;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
}

#hamburgerMenu.active {
  opacity: 1;
  visibility: visible;
}

header nav a {
  text-decoration: none;
  color: rgb(88, 102, 110);
  font-size: 20px;
  font-weight: bold;
  padding: 7px;
}

header nav li {
  list-style-type: none;
  padding: 20px 0;
}

header nav li span {
  font-size: 16px;
  padding-right: 30px;
}

header {
  display: block;
}

header nav {
  padding-top: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hamburgerMenuTrigger">
  <div class="menuTrigger" id="menuTriggerBtn">
    <div class="hamburger" id="hamburgerBtn"></div>
  </div>
  <div id="hamburgerMenu">
    <nav class="hamburgereMenu-Nav">
      <ul class="hamburgerMenu-Ul">
        <li class="hamburgerMenu-nav-item  hamburgerMenu-right-li">
          <a class="hamburgerMenu-nav-link  hamburgerMenu-menu" href="">
            <span>01</span>
          </a>
        </li>
        <li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
          <a class="hamburgerMenu-nav-link  hamburgerMenu-menu" href="">
            <span>02</span>
          </a>
        </li>
        <li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
          <a class="hamburgerMenu-nav-link  hamburgerMenu-menu" href="">
            <span>03</span>
          </a>
        </li>
        <li class="hamburgerMenu-nav-item  hamburgerMenu-right-li">
          <a class="hamburgereMenu-nav-link  hamburgerMenu-menu" href="">
            <span>04</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

告诉我是否正常。

相关问题
最新问题