View Full Version : Malfunction with Pull-down multi-level Menu

Digital Pyxie
01-24-2009, 04:36 PM
I'm fairly new to JavaScript, having only had one class in it, and could use some help. I've been asked to create a site for my younger sister and she's requested a horizontal pull-down menu using graphics for the links instead of simply text. This is my first time trying to code such a menu (topic not covered in class) and I'm having some difficulty getting it to work completely.

Right now it's partially working. The various sub menus do show up when clicking or rolling over the previous menu item. However all menu items past the one clicked jump down one line when expanding instead of simply showing the sub menu under the main line up. The rollover also has issues but mostly because I haven't finished coding the onmouseout part, so it doesn't go away. I'm trying to get the main pull down working before tackling that part.

Below is the JavaScript function I'm trying to use as well as a part of the menu. I'd really appreciate some help with this. I've already spent months trying to get this working and am not making much headway. Thanks.

function displayMenu(currentMenu) {

var thisMenu = document.getElementById(currentMenu).style

// If the menu is expanded, contract it
if (thisMenu.display == "block") {
thisMenu.display = "none"
else {
// If the menu is contracted, expand it
thisMenu.display = "block"
return false

<a href="index.html" onclick="return displayMenu('neckMenu')"><img src="graphics/menu/necklaces.gif" alt="history" width="68" height="36" /></a>
<span class="menu" id="neckMenu">

<a href="index.html" onmouseover="return displayMenu('neckChainMenu')"><img src="graphics/menu/chainmaille.gif" width="80" height="21" alt="" /></a>
<span class="menu" id="neckChainMenu">
<a href="necklaces/chainmaille/silver/index.html"><img src="graphics/menu/silver.gif" width="50" height="18" alt="" /></a><br />
<a href="necklaces/chainmaille/copper/index.html"><img src="graphics/menu/copper.gif" width="50" height="22" alt="" /></a><br />

<a href="index.html" onmouseover="return displayMenu('neckWireMenu')"><img src="graphics/menu/wirework.gif" width="80" height="19" alt="" /></a>
<span class="menu" id="neckWireMenu">
<a href="necklaces/wire/silver/index.html"><img src="graphics/menu/silver.gif" width="50" height="18" alt="" /></a><br />
<a href="necklaces/wire/silver/copper/index.html"><img src="graphics/menu/copper.gif" width="50" height="22" alt="" /></a><br />


01-25-2009, 09:51 AM
I'd recommend you to check http://htmldog.com/articles/suckerfish/dropdowns/, which would guide you to set up an easy and semantic (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html) multi level menu.

Digital Pyxie
01-26-2009, 03:58 PM
Thanks! Checked it out and it does look simpler than what I was trying to do. I'll try it and see how it works. Again, thanks!!