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;
}

ul li {
  list-style: none;
}

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

ul li a: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-btn span {
  height: 0.063em;
  background: #282828;
  margin-bottom: 0.313em;
  display: block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="device-width, initial-scale=1">
  <title>Responsive Side Nav</title>
  </head>

  <body>

    <div id="sidebar">

      <nav>
        <ul>
          <li><a href="#" class="active">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>

      <div id="sidebar-btn">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <script src="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>

You may like these posts

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