Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2009-05-14
1
Medium Priority
?
224 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 12

Accepted Solution

by:
Chad Haney earned 1500 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

URL rewriting in AWS CloudFront

A quick how-to guide to implement with a Lambda function!

Question has a verified solution.

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

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

721 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