Solved

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

Posted on 2009-05-14
1
218 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 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

Create CentOS 7 Newton Packstack Running Keystone

A bug was filed against RDO for the installation of Keystone v3. This guide is designed to walk you through the configuration for using Keystone v3 with Packstack. You will accomplish this using various repos and the Answers file.

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…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

628 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