Solved

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

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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Exchange Server 2013 Message Tracking log Powershell ? 11 111
Display field if column exists 7 58
PDF Turn Look 7 34
Copy files and run psex to windows 7 only 14 51
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…
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

734 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