This tutorial will show you how to make a nice looking drop down menu. One click makes a submenu appear and clicking it again hides it. Sound good?
Firstly we will start off with the JavaScript code needed to make this work.
JavaScript Code
<script type="text/javascript">
//<![CDATA[
function HideandUNhideObj(ThisObj){
nav=document.getElementById(ThisObj).style
if(nav.display=="none"){
nav.display='block';
}else{
nav.display='none';
}
}
//]]>
</script> |
This code can go pretty much anywhere, it's best to keep it right above your menu so that it's easy to find should you need to edit it later on.
The next part of the code is going to be our list code along with the codes to open and close the drop down menu.
HTML Code
<ul>
<li><a href="#" onclick="HideandUNhideObj('div1');">Menu 1</a>
<div style="display: none;" id="div1">
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li><a href="#" onclick="HideandUNhideObj('div2');">Menu 2</a>
<div style="display: none;" id="div2">
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li><a href="#" onclick="HideandUNhideObj('div3');">Menu 3</a>
<div style="display: none;" id="div3">
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</div>
</li>
</ul> |
Here you can see we have our lists. I will break the code down so you can understand it better.
<ul>
<!-- Opening unordered list tag -->
<li><a href="#" onclick="HideandUNhideObj('div1');">Menu 1</a>
<!-- First list element which contains the link to reveal the submenu -->
<div style="display: none;" id="div1">
<!-- The hidden div element with the ID div1 which corresponds to the link above ('div1') -->
<ul>
<!-- The start of our submenu list -->
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
<!-- The end of our submenu list -->
</div>
<!-- The closing tag of the hidden div -->
</li>
<!-- The end tag for the list element which contains the link to reveal the submenu -->
</ul>
<!-- Closing unordered list tag --> |
So far, by using the JavaScript code and the above lists we have the results which can be seen in example of the CSS menu using JavaScript.