javascript - 滑入菜单需要切换汉堡包选项

Question

function openNav() {
  document.getElementById("mySidenav").style.width = "50%";
  document.getElementById("mySidenav2").style.width = "50%";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("mySidenav2").style.width = "0";
}

<style>body {
  font-family: "Lato", sans-serif;
}

.leftSidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.leftSidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.leftSidenav a:hover,
.offcanvas a:focus {
  color: #f1f1f1;
}

.leftSidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .leftSidenav {
    padding-top: 15px;
  }
  .leftSidenav a {
    font-size: 18px;
  }
}

.rightSidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.rightSidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.rightSidenav a:hover,
.offcanvas a:focus {
  color: #f1f1f1;
}

.rightSidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .rightSidenav {
    padding-top: 15px;
  }
  .leftSidenav a {
    font-size: 18px;
  }
}

</style>

<div id="mySidenav" class="leftSidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="mySidenav2" class="rightSidenav">
  <a href="#">About 2</a>
  <a href="#">Services 2</a>
  <a href="#">Clients 2</a>
  <a href="#">Contact 2</a>
</div>

<h2>Would like toggle switch</h2>
<p>As of now open and close are 2 different icons</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

我有一个由我的汉堡包图标激活的菜单幻灯片。无论屏幕大小，我只使用汉堡包图标。截至目前，我的代码使用汉堡包图标在左右菜单中滑动。有一个单独的关闭图标来关闭菜单。我想使用汉堡包图标来打开和关闭我的菜单，如果可能的话，当菜单打开时，汉堡包图标会变为 X。

我试着自己做这件事，但我做不到。

感谢您的帮助。

Answer 1

您可以使用打开开关来切换状态类。您有很多重复的样式可以组合到一个类中。 要重复使用您的拨动开关，您可以将其固定。这允许您在屏幕中心的状态更改时为其设置动画。

function toggleNav() {
  (document.body || document.documentElement).classList.toggle( 'nav-is-open' );
}

body {
  font-family: "Lato", sans-serif;
  padding-top: 30px;
}

.toggleNav {
  position: fixed;
  left: 5px;
  top: 5px;
  font-size: 30px;
  cursor: pointer;
  z-index: 10;
  opacity: 1;
  
  transition: transform .5s ease, color .5s, opacity .5s;
}

.nav-is-open .toggleNav {
  transform: translateX( calc( 50vw - 40px ) );
  color: #fff;
  opacity: .5;
}

.nav-is-open .toggleNav::before {
  content: '\000D7';
}

.nav-is-open .toggleNav > span {
  display: none;
}

.nav-is-open .toggleNav:hover {
  opacity: 1;
}

/* Combine same styles of both sides in one class */
.Sidenav {
  position: fixed;
  top: 0;
  height: 100%;
  width: 0;
  z-index: 1;

  padding-top: 60px;
  background-color: #111;
  overflow-x: hidden;
  transition: width .5s ease;
}

.leftSidenav {
  left: 0;
}

.rightSidenav {
  right: 0;
  /* Instead of having width: 0 we transform it to the side
     This prevents text from wrapping */
  width: 50%;
  transform: translateX( 100% );
  transition: transform .5s ease;
}

/* Combine link styles into one */
.Sidenav a {
  display: block;
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  transition: 0.3s;
}

.Sidenav a:hover {
  color: #f1f1f1;
}

.nav-is-open .Sidenav {
  width: 50%;
  transform: translateX( 0 );
}

@media screen and (max-height: 450px) {
  .Sidenav {
    padding-top: 15px;
  }
  .Sidenav a {
    font-size: 18px;
  }
}

<div class="Sidenav leftSidenav">
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div class="Sidenav rightSidenav">
  <a href="#">About 2</a>
  <a href="#">Services 2</a>
  <a href="#">Clients 2</a>
  <a href="#">Contact 2</a>
</div>

<a class="toggleNav" onclick="toggleNav()"><span>&#9776;</span></a>

我将这些线包裹在一个跨度内，所以当 .nav-is-open 类存在时，我们可以隐藏跨度并使用 CSS 添加另一个符号。