Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Location
    Michigan
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Malfunction with Pull-down multi-level Menu

    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.

    Code:
    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
    }
    Code:
    <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 />
      </span>
    
    <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 />
      </span>
    	
    </span>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    I'd recommend you to check http://htmldog.com/articles/suckerfish/dropdowns/, which would guide you to set up an easy and semantic multi level menu.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Digital Pyxie (01-26-2009)

  • #3
    New to the CF scene
    Join Date
    Jan 2009
    Location
    Michigan
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •