Slide in menu needs toggle hamburger option

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>

I have a slide in menu that is activated by my hamburger icon. I only use the hamburger icon no matter what size the screen is. As of now my code uses the hamburger icon to slide in both the left and right menus. There is a separate close icon to close the menus. I would like to use the hamburger icon to open and close my menus and also if possible have the hamburger icon change to an X when the menus are open.

I tried to do this my self by I'm not able to do it.

Thank you for any help.

Answer 1

You can use your opening-switch to toggle a state-class. You have a lot of duplicated styles that can be combined to one class. To reuse your toggle-switch, you can make it fixed. That allows you to animate it on a state change to the center of the screen.

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>

I wrapped the lines inside a span, so when the class .nav-is-open is present we'd be able to just hide the span and add another symbol with CSS.