How to create menu with css and javascript

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


Copy

Step 2

Javascript

function HideAll() { 
var x;
for(i=1;i<4;i++)
{
  x = document.getElementById("Menu"+i);
  x.className = x.className.replace(" w3-show", "");
 }


}
Copy

function showMenu1() {
  HideAll();
  var x = document.getElementById("Menu1");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else { 
    x.className = x.className.replace(" w3-show", "");
  }
}
function showMenu2() {
HideAll();
  var x = document.getElementById("Menu2");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else { 
    x.className = x.className.replace(" w3-show", "");
  }
}
function showMenu3() {
HideAll();
  var x = document.getElementById("Menu3");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else { 
    x.className = x.className.replace(" w3-show", "");
  }
}
Copy

Step 3

HTML

<div class="w3-dropdown-click">
   <button onclick="showMenu1()" class="w3-button">Menu 1</button>
   <div id="Menu1" class="w3-dropdown-content w3-bar-block w3-animate-zoom">
       <a href="#" class="w3-bar-item w3-button">Link 1</a>
       <a href="#" class="w3-bar-item w3-button">Link 2</a>
       <a href="#" class="w3-bar-item w3-button">Link 3</a>
   </div>
   </div>
<div class="w3-dropdown-click">   
   <button onclick="showMenu2()" class="w3-button">Menu 2>/button>
   <div id="Menu2" class="w3-dropdown-content w3-bar-block w3-animate-zoom">
       <a href="#" class="w3-bar-item w3-button">Link 1>/a>
       <a href="#" class="w3-bar-item w3-button">Link 2>/a>
       <a href="#" class="w3-bar-item w3-button">Link 3>/a>
   </div>
</div>
<div class="w3-dropdown-click">   
   <button onclick="showMenu3()" class="w3-button">Menu 3>/button>
   <div id="Menu3" class="w3-dropdown-content w3-bar-block w3-animate-zoom">
       <a href="#" class="w3-bar-item w3-button">Link 1>/a>
       <a href="#" class="w3-bar-item w3-button">Link 2>/a>
       <a href="#" class="w3-bar-item w3-button">Link 3>/a>
   </div>
</div>
Copy

Download the example