EasyZoom and Slick jQuery

https://stackoverflow.com/q/64470545

by joshmoto

HTML

<div id="mobile-nav">
  <button class="menu-btn" id="menu-btn" onclick="myFunction(this)">
    <span></span>
    <span></span>
    <span></span>
  </button>

  <div id="responsive-menu">
    <ul>
      <li><a href="index.php"> <i class="glyphicon glyphicon-home"></i> HOME </a></li>
    </ul>
  </div>
</div>

CSS

#mobile-nav {
  z-index: 9999;
  position: fixed;
  left: 10px;
  top: 60px;
  width: 20px;
}

#menu-btn {
  background: transparent;
  padding: 10px;
  border: none;
  z-index: 5;
}

#menu-btn:hover {
  cursor: pointer;
}

#mobile-nav.expand #menu-btn:hover {
  
}

#menu-btn:focus {
  outline: none;
  border: 0;
}

#menu-btn SPAN {
  width: 24px;
  display: block;
  height: 3px;
  background: transparent;
  z-index: 99;
  transition: 0.4s;
  margin-bottom: 6px;
  z-index: 10;
  position: relative;
  opacity: 1;
}

#menu-btn SPAN::before {
  display: block;
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: black;
  transition: 0.4s;
}

#menu-btn SPAN:last-child {
  margin-bottom: 0;
}

/* remove this so #menu-btn clickable area is not the full window when #mobile-nav is expanded

#mobile-nav.expand #menu-btn::before {
  display: block;
  position: fixed;
  content: '';
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: blue;
}
*/

#mobile-nav.expand #menu-btn SPAN:first-child,
#mobile-nav.expand #menu-btn SPAN:last-child {
  transform: translateX(2px);
}

#menu-btn SPAN:first-child::before {
  transform-origin: 0 100%;
}

#mobile-nav.expand #menu-btn SPAN:first-child::before {
  transform: rotate(45deg);
}

#mobile-nav.expand #menu-btn SPAN:nth-child(2)::before {
  opacity: 0;
}

#menu-btn SPAN:last-child::before {
  transform-origin: 0 0;
}

#mobile-nav.expand #menu-btn SPAN:last-child::before {
  transform: rotate(-45deg);
}

#responsive-menu {
  box-shadow: 2px 2px;
  max-height: 0;
  background-color: #fff;
  width: 200px;
  overflow: hidden;
  transition: all .25s;
  position: absolute;
  right: -220px;
  text-align: left;
  top: 10px;
}

#responsive-menu > UL {
  padding: 20px 0 0 20px;
  list-style: none;
}

#responsive-menu > UL > LI {
  padding-bottom: 10px;
}

#responsive-menu A {
  text-decoration: none;
  color: #000;
}

#mobile-nav.expand #responsive-menu {
  max-height: none;
}

JavaScript

$(function() {

  $(document).on('click','#menu-btn', function(){
    $('#mobile-nav').toggleClass('expand');
  });

});