Jump to content

Altering This Expanding Menu Script


Bonmot
 Share

Recommended Posts

Hello,I found this script which works quite well except for one or two things.1. When the page with the script opens or reloads, the entire menu is fully expanded. Is there way to code this so it opens fully collapsed? Or even better, So that all the sub menus are collapsed exceptthe sub menus pertaining to the section that is open. In other words, let's say you have 5 headings and each hasa few sub headings. If one of the main headings is "Cars" and it has 3 sub menus like "Chevy", "Toyota" and "Dodge"; if any of the three sub pages are open, the menu will be collapsed except for the "Cars" main menu heading.(Hope this makes sense)2. Also (less important), is there way to make the main headings expand when moused overrather than clicked, and then stay open when in the appropriate section (as described above)?Thanks!(The menu code is self-contained below. Just paste into HTML doc to test)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Vertical navigation.</title><style type="text/css"><!--body {	font-family: Arial,  Verdana, Tahoma, Helvetica, sans-serif;	font-size: 12px;}.Group {	display: block;	height: 28px;	width: 173px;	background-image: url(Button_Group.jpg);	line-height: 27px;	padding-left: 27px;	color: #dfdfdf;	text-decoration: none;}.Group:hover {	color: #dfdfdf;	text-decoration: underline;}.Option {	display: block;	height: 28px;	width: 173px;	background-image: url(Button_Option.jpg);	line-height: 27px;	padding-left: 27px;	color: #dfdfdf;	text-decoration: none;}.Option:hover {	color: #dfdfdf;	text-decoration: underline;}.show {	display:inline;}.hide {	display:none;}--></style><script type="text/Javascript"><!--function display (category) {	var whichcategory = document.getElementById(category);	if (whichcategory.className=="show") {		whichcategory.className="hide";	} else {		whichcategory.className="show";	}}--></script></head><body><div title="Navigation">	<a href="#" class="Group">Home</a>	<a href="java script:display('Tutorials')" class="Group">Tutorials</a>	<div class="show" id="Tutorials">		<a href="#" class="Option">Photoshop</a>		<a href="#" class="Option">Flash</a>		<a href="#" class="Option">PHP / MySQL</a>	</div>	<a href="java script:display('Resources')" class="Group">Resources</a>	<div class="show" id="Resources">		<a href="#" class="Option">Software</a>		<a href="#" class="Option">Source Code</a>		<a href="#" class="Option">Websites</a>	</div>	<a href="#" class="Group">Contact</a></div></body></html>

Link to comment
Share on other sites

For the first issue, you need a way of figuring out which page you're on. One way is to have a Javascript variable on each page that tells it which parts of the menu to expand for that page. Another way might be to determine the page name and do something based on that.For the second issue, use onmouseover and onmouseout on the link instead of the href.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...