Contact us...Newsletter
dzosoft.com - How to do it ?
dzosoft- order by asc dzosoft- order by desc

 
 
 

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! 😇
dzosoft
WavePad
Car Rental Deals in Paris
Reviews of dzosoft.com   Copyright © 2022  -  dzosoft.com  All rights reserved.  
dzosoft- How to do it ?
What they are cookies
Like most websites, we use data file small
dimensions that are saved on your computer, tablet, mobile phone or other device
Mobile (collectively referred to as 'device') to record certain data whenever
login or interact with our sites, services, apps, messaging systems
and strumenti.I names and specific types of cookies used can change over time.
To help you better understand the rules and \ 'use of such technology, the following are
some terms and their definitions:
Cookies: small text files (usually formed by letters and numbers) that are saved
in memory of the browser or the device when you visit a website or display a message.
Cookies enable a website to recognize a particular device or browser. There
different types of cookies:
Session cookies expire at the end of the browser session and allow us to
connect your actions during that specific session.
Persistent cookies are instead stored in your device even after the end
the browser session and let you remember your preferences or actions at multiple sites.
First-party cookies are set by the site you're visiting.
The third-party cookies are set by a third party site than the site you are visiting.
Cookies can be disabled or removed using the tools available in most
browsers. The cookie preferences must be set separately
for each browser used, because each offers features and specific options.
dzosoft.com - How to do it ?
Licenza Creative Commons
How to do it ?    - download & install software     is licensed under license Creative Commons Attribution - Non-commercial - Share alike 4.0 International.