Open Menu dzosoft
Close Menu dzosoft

   ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY


                             




 
 
 

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...