Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

Convert Animated Jquery Side Nav To Vanilla Js

Post a Comment
I need help converting a Jquery side navigation menu into Vanilla JS. I'm a beginner with JS and have no idea how to accomplish this. Also any advice on animating the burger icon t

Solution 1:

Substitute window.onload = function(){} for $(document).ready(); .addEventListener("click", function() {}) for .click(function() {}); document.getElementById() for jQuery(); Element.classList.toggle() for .toggleClass()

/**********************
  ****NAVIGATION****
**********************/#sidebar {
  background: #151718;
  width: 12.500em;
  height: 100%;
  display: block;
  position: absolute;
  left: -12.500em;
  top: 0px;
  transition: left 0.3s linear;
}

#sidebar.visible {
  left: 0.000em;
}

nav {
  text-align: center;
}

ul {
  margin: 0.000em;
  padding: 0.000em;
}

ulli {
  list-style: none;
}

ullia {
  background: #1c1e1f;
  color: #ccc;
  border-bottom: 1px solid #111;
  display: block;
  width: 11.250em;
  padding: 0.625em;
  text-decoration: none;
  text-transform: uppercase
}

ullia:hover {
  color: #4876FF;
}

#sidebar-btn {
  display: inline-block;
  vertical-align: middle;
  width: 1.563em;
  height: 1.250em;
  cursor: pointer;
  margin: 1.250em;
  position: absolute;
  top: 0.000em;
  right: -3.750em;
}

#sidebar-btnspan {
  height: 0.063em;
  background: #282828;
  margin-bottom: 0.313em;
  display: block;
}
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="device-width, initial-scale=1"><title>Responsive Side Nav</title></head><body><divid="sidebar"><nav><ul><li><ahref="#"class="active">Home</a></li><li><ahref="#">About</a></li><li><ahref="#">Services</a></li><li><ahref="#">Contact</a></li></ul></nav><divid="sidebar-btn"><span></span><span></span><span></span></div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script>window.onload = function() {
        document.getElementById('sidebar-btn')
        .addEventListener("click", function() {
          document.getElementById('sidebar')
          .classList.toggle('visible');
        });
      };
    </script></body></html>

Post a Comment for "Convert Animated Jquery Side Nav To Vanilla Js"