Vertical drop-down menu help. I am new to javascript.

Hi,

I have been following a css/javascript vertical expanding menu tutorial from http://tutorials.alsacreations.com/deroulant/ and I was hoping for some help.

I Have the menu working, but i want to change some of the code,
for example:

when you click "menu 2" the menu expands and also opens a page for "menu 2" while the menu stays expanded.

Here is the Tutorial:


HTML

<dl id="menu">

		<dt onclick="javascript:show();"><a href="#">Menu 1</a></dt>
			
		<dt onclick="javascript:show('smenu2');">Menu 2</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">sub-menu 2.1</a></li>
					<li><a href="#">sub-menu 2.2</a></li>
					<li><a href="#">sub-menu 2.3</a></li>
				</ul>
			</dd>	

		<dt onclick="javascript:show('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">sub-menu 3.1</a></li>
					<li><a href="#">sub-menu 3.1</a></li>
					<li><a href="#">sub-menu 3.1</a></li>
					<li><a href="#">sub-menu 3.1</a></li>
					<li><a href="#">sub-menu 3.1</a></li>
					<li><a href="#">sub-menu 3.1</a></li>
				</ul>
			</dd>

		<dt onclick="javascript:show('smenu4');">Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">sub-menu 4.1</a></li>
					<li><a href="#">sub-menu 4.1</a></li>
				</ul>
			</dd>
	
</dl>

Code (markup):

Javascript

<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

Code (markup):

CSS

<style type="text/css" media="screen">
<!-- 
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* Menu position that can be changed at will */
top: 0;
left: 0;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
-->
</style>

Code (markup):

I have added a link for menu 2 i.e.

<dt onclick="javascript:show('smenu2');"><a href="example menu2">Menu 2</a></dt>

Code (markup):

but when you click it, it opens the page, but the drop down doesn't expand.

What would be the best way to do this. I am new to javascript, but I am sure it's easy to do.

 

I have an AJAX two-level menu maker:

Menu/Navigation Panel Builder

* Two levels
* Mouseover / out shows hides second level items
* Quickly create the options by editing a simple .xml file, like the one below
* Re-arrange the menu options by re-arranging the .xml file
* Never have to modify the main page
* Quicky change link URLs
* Works in IE and Firefox on all servers

<?xml version="1.0" ?>	
	<menu>
		<main> 
			<text> First </text>
			<sub>
				<text> Anything </text>
				<link> links/anything.html </link>
			</sub>
			<sub>
				<text> Everything </text>
				<link> links/everything.html </link>
			</sub>
			<sub>
				<text> Nothing </text>
				<link> links/nothing.html </link>
			</sub>
		</main>
		<main>
			<text> Second </text>
			<link> links/apples.html </link>
		</main>
		<main> 
			<text> Third </text>
			<sub>
				<text> Something </text>
				<link> links/something.html </link>
			</sub>
		</main>
		<main>
			<text> Fourth </text>
			<link> links/oranges.html </link>	
		</main>
	</menu>

Code (markup):

If interested, promptly respond.

 

Thanks for the offer, but I want to stick to the menu have created.

I have changed the css to match my site and I just need to know what needs to be changed in the javascript to allow the expanding menu to stay open when clicked.

If anyone has any other simple solutions or another idea that would work better, then I'd be grateful if you could help.

Thanks

 

Has anyone got any ideas?? I don't know anything about javascript.

Please help me.