Convert Animated Jquery Side Nav to Vanilla JS

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 to transform into an X when clicked? Thank you. Any help is appreciated

/**********************
  ****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>
	<link rel="stylesheet"  href="css/normalize.css">
	<link rel="stylesheet"  href="css/style.css"
</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>
	  
		 $(document).ready(function(){
			 $('#sidebar-btn').click(function(){
				 $('#sidebar').toggleClass('visible');
			 });
		 });
		 
	</script>
</body>
</html>

Answers 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>


Related Articles