Слайд в меню необходимо переключить опцию гамбургер

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.