CSS Dropdown Menu with JavaScript

In this tutorial we will see how to create a Pure CSS Dropdown Menu with JavaScript. HTML, CSS and JavaScript code is given below.

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="text" onclick="menu(this)">:(</span>
      <div id="list">
        <li><a href="#">HTML Tutorials</a></li>
        <li><a href="#">Learn CSS</a></li>
        <li><a href="#">JavaScript Videos</a></li>
      </div>    
    </ul>

CSS Code

CSS code is given below.

<style>
body{
        font-family: sans-serif;
        background-color: #5b0085;
}
.menu{
          list-style: none;
          color: #fff;
          width: 120px;
          text-align: center;
}
#text{
          cursor: pointer;
          display: block;
          background-color: #2B3033;
          width: 50px;
          padding: 8px;
          font-size: 10px;
          margin: auto;
          border-radius: 6px;
}
#list li{
          padding: 5px 0px;
}
#list li a{
          text-decoration: none;
          color: #fff;
          font-size: 10px;
}
#list{
          background-color: #2B3033;
          padding: 10px 0px;
          margin-top: 10px;
          transition: 0.5s;
          border-radius: 6px;
          opacity: 0;
}
</style>           

JavaScript Code

JavaScript code is given below.

<script>
var x=0;
var element = document.getElementById("list");    
function menu(text){
if(x==0)
{ 
text.innerHTML=':)';    
element.style.opacity=1;
x=1;    
}
else{
text.innerHTML=':(';      
element.style.opacity=0;
x=0;    
}    
} 
</script>           

Video Tutorial

Watch our video tutorial on CSS Dropdown Menu with JavaScript.