汉堡菜单滑动

Question

我正在尝试创建像这个网站上的菜单：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>

- Arianna22

Answer 1

你移除活动类太快了，因此将不透明度和可见性设置为隐藏菜单。在回调中为宽度添加动画并隐藏菜单将反转您的出现动画。

$(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>

- Joscha

Answer 2

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

我稍微改了一下你的代码，

$(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>

请告诉我它是否正常工作。

- Manish Khedekar

---

是的，谢谢！还有一个问题，我能用变换矩阵实现这个吗？ - Arianna22

是的，您可以通过变换矩阵实现它，请参考以下链接 - https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix 此外，使用此方法可以保持动画的不同步骤，并且您可以在以下链接中找到平滑的动画效果 https://codepen.io/1Marc/pen/FJbtj 您还可以在这里了解更多信息，https://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/ - Manish Khedekar

如何在移动设备上使其占据整个宽度？ - Arianna22

首先添加类，.hamburgerMenuClass { width: 200px; } 而不是通过id应用css。 添加媒体查询 @media only screen and (max-width: 768px) { .hamburgerMenuClass { width: 100%; } } 您可以使用JS切换类并更改不透明度。我已编辑答案，请检查。 - Manish Khedekar

请检查完整页面和移动视图。 - Manish Khedekar