Simple Toggle Menu using HTML CSS and JavaScript

In this tutorial we will see how to create a Simple Toggle Menu using HTML CSS and JavaScript. JavaScript is used to display the menu and hide it while CSS is used to design it.

Table of Contents

• HTML Code
• CSS Code
• JavaScript Code
• Video Tutorial
• More CSS Tutorials

HTML Code

Take a look at the HTML code given below.

    <ul class="menu">
     <span id="icon" onclick="menu(this)">+</span>
     <div id="list">
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Contact</a></li>
        <li><a href='#'>About</a></li>
     </div>    
    </ul>   

CSS Code

CSS code is given below.

<style>
body{
    font-family: sans-serif;
    background-color: #5fc7ea;
}
.menu{
      list-style: none;
      color: #fff;
      width: 150px;
      text-align: center;
}
#icon{
      cursor: pointer;
      display: block;
      background-color: #2B3033;
      width: 50px;
      padding: 8px 0px;
      font-size: 30px;
      margin: auto;
      border-radius: 25px;
      transition: all 0.3s;    
}
#list{
      background-color: #2B3033;
      padding: 25px 0px;
      border-radius: 14px;
      margin-top: 20px;
      transition: all 0.3s;
      transform: scale(0);
}
#list li{
      padding: 15px 0px;
}
#list li a{
      text-decoration: none;
      color: #fff;
      font-size: 14px;
}
.animate{
      transform: scale(1) !important;
}
</style>           

JavaScript Code

JavaScript code is given below.

<script>
var x=0;
var element = document.getElementById("list");    
function menu(icon){
if(x==0)
{
icon.style.transform = "rotate(45deg)";     
element.classList.add("animate");
x=1;
}
else{
icon.style.transform = "rotate(0deg)";    
element.classList.remove("animate");
x=0;    
}    
} 
</script>           

Video Tutorial

Watch our video tutorial on Simple Toggle Menu using HTML CSS and JavaScript.