Solved

Drop down menu additional question (mouse click instead of rollover) on javascript

Posted on 2009-05-14
1
214 Views
Last Modified: 2013-12-25
How do I create a vertical drop down menu where if you can click the mouse on one menu to see the sub menu which stays still there until you click the head menu again to hide the submenu?
0
Comment
Question by:blee246
1 Comment
 
LVL 12

Accepted Solution

by:
Chad Haney earned 500 total points
ID: 24392293
Utilize javascript to change the views of your menu items utilizing the style="display:none" and "block".  See example code for reference of how to set this up.
//Scripts relating to examples

//

function change1(){

if(document.getElementById("1Nav").style.display=="block"){

    document.getElementById("1Nav").style.display="none";

}else{

document.getElementById("1Nav").style.display="block"; 

}

document.getElementById("2Nav").style.display="none";

}

function change2(){
 

if(document.getElementById("2Nav").style.display=="block"){

    document.getElementById("2Nav").style.display="none";

}else{

document.getElementById("2Nav").style.display="block"; 

}

document.getElementById("1Nav").style.display="none"; 

}

////////////////////////////////////////////////////

////////////////////////Example Code////////////////

<tr> 

	<td align="center" id="theNav">

		<ul class="mainNav">

			<li id="btnSpacer"> </li>

			<li id="btn1" onclick="change1()">1</li>

			<li id="btnSpacer"> | </li>

			<li id="btn2" onclick="change2()">2</li>

			<li id="btnSpacer"> </li>

		</ul>

		<ul class="subNav">

			<ul id="1Nav" style="display: none">

				<li><!--menu options--></li>

			</ul>

			<ul id="2Nav" style="display: none">

				<li><!--menu options--></li>

			</ul>

		</ul>	

	</td>

</tr>

Open in new window

0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will show, step by step, how to integrate R code into a R Sweave document
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
The viewer will learn how to count occurrences of each item in an array.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now