How to make a SlideMenu?

"The defined function below is suppose to create a slideMenu on the nleft side of the index page. However its seems like i have missed something as the slide Menu doesn's work."

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Animated Sidebar Menu</title>
  <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
  <link rel="stylesheet" href="style.css">
<script>
 function openSlideMenu(){
  document.getElementById('menu').style.width = '250px';
  document.getElementById('content').style.marginLeft = '250px';
 }
 function closeSlideMenu(){
  document.getElementById('menu').style.width = '0';
  document.getElementById('content').style.marginLeft = '0';
 }
</script>
</head>
<body>

  <div id="content">
   
   <span class="slide">
    <a href="#" onClick="openSlideMenu()">
    <i class="fas fa-bars"></i>
  </a>
   </span>
   
   <div id="menu" clSS="nav">
    <a href="#" class="close" onclick="closeSideMenu()">
   <i class="fas fa-times"></i>
  </a>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
   </div>
   
   <h1>S.T. Graffix Menu</h1>
   
 </div>
 
</body>
</html>

1 answer

  • answered 2020-02-13 03:58 Makdia Hussain

    You are calling an invalid close function, that means you gave a wrong function name on the

    onclick="closeSideMenu()" 
    

    So it Should be closeSlideMenu():

    onclick="closeSlideMenu()"