Open Menu dzosoft
Close Menu dzosoft

   ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY


                             




Dazzle with your smile!

Publish perfectly-optimized content in 1-click









 
 
 

How to create menu with css and javascript

 

 

Step 1

 

Cascading Style Sheets (CSS)

 
We use the w3.css file from w3school


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


 

Step 2

 

Javascript

 

The first function HideAll allows us to hide all the menu (Menu1, Menu 2 and Menu3)
just set the className to empty, If we want show the menu just set the className to " w3-show "


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


The function showMenu1 (the same with showMenu2 and showMenu3) show the menu (the div with id "Menu1")


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", ""); } }


 

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>



Download the example


Happy Coding! 😇

It might also interest you


How can we do animations with only CSS

How to create horizontal menu in CSS

How do you make a border radius round in CSS?

How to create sign up form with HTML and CSS

How To make a responsive website

How to create GLITCH effect with CSS

How to change the style of the scrollbars

How to create a Focus effect on hover using CSS

How to create a footer using Bootstrap: tutorial and example


Leave comment
          

Save nickname and email in this browser for the next time.



Loading...     
close publicity
BUILD THE MASS IN A FEW MONTHS THAT OTHERS BUILD IN YEARS!