SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    UK
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help js menu - probably simple solution

    I am using this javascript expand/collapse menu located here: http://www.gazingus.org/html/menuExpandable3.html

    The javascript it uses is:

    Code:
    if (!document.getElementById)
        document.getElementById = function() { return null; }
    
    
    function initializeMenu(menuId, actuatorId) {
        var menu = document.getElementById(menuId);
        var actuator = document.getElementById(actuatorId);
    
        if (menu == null || actuator == null) return;
    
        //if (window.opera) return; // I'm too tired
    
        actuator.parentNode.style.backgroundImage = "url(../images/plus.gif)";
        actuator.onclick = function() {
            var display = menu.style.display;
            this.parentNode.style.backgroundImage =
                (display == "block") ? "url(../images/plus.gif)" : "url(../images/minus.gif)";
            menu.style.display = (display == "block") ? "none" : "block";
    
            return false;
        }
    }
    What I want is for only one submenu to be shown at any one time.

    For example in the menu found at the link above; if the "new Phones" submenu was displayed - when the "compare" menu was clicked the "new phones" menu would collapse and vice versa.

    Basically I need it to show only one submenu at any one time and not allow them all to be expanded at once.

    I tried to explain it the best I could

    If any one could tell me what js code I need to add i'd appreciate it.

    Regards,

    -mscwd

  2. #2
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You dont need to make any change to the js. Add or remove list items as needed.

    read the tutorial, this explains in detail about adding or removing items.

    http://www.gazingus.org/html/DOM-Scr...Revisited.html

    Code:
    <div id="mainMenu">
    	  <ul id="menuList">
    		<li class="menubar">
    		  <a href="#" id="productsActuator" class="actuator">Phones</a>
    		  <ul id="productsMenu" class="menu">
    			New phone is taken out
    			<li>
    			  <a href="#" id="compareActuator" class="actuator">Compare</a>
    			  <ul id="compareMenu" class="submenu">
    				<li><a href="#">All Phones</a></li>
    				<li><a href="#">Service Provider</a></li>
    			  </ul>
    			</li>
    		  </ul>
    		</li>
    	  </ul>
    	</div>
    new Phone that is taken out
    Code:
     
    <li>
    			  <a href="#" id="newPhonesActuator" class="actuator">New Phones</a>
    			  <ul id="newPhonesMenu" class="submenu">
    				<li><a href="#">9290</a></li>
    				<li><a href="#">8390</a></li>
    				<li><a href="#">8290</a></li>
    				<li><a href="#">8270</a></li>
    			  </ul>
    			</li>
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    UK
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No I think you have misunderstood me. I want the menu to only allow one sub menu to be opened at any one time. So if sub menu 1 was open then you opened sub menu 2 then sub menu 1 would automatically close. And vice versa. I will need additional javascript.


    Thanks,

    -mscwd

  4. #4
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am sorry, yes i completely misunderstood your question. Over the weekend i will have some time to play with the js and i'll post it if i have some thing working.

    In the mean time here are some other good resources that can help you in building the menu

    http://www.alistapart.com/articles/horizdropdowns/
    http://css.maxdesign.com.au/index.htm
    http://www.udm4.com/manual/
    http://www.projectseven.com/tutorials/css/uberlinks/
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    UK
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats great, i really appreciate it. I'll take a look at those links as well though.

    Thanks again,

    -mscwd

  6. #6
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, i had to travel out of the country due to job. I am still outside the country. I'll give it a try once i am back.

    Tahirjadoon
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    UK
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks for letting me know. I dont need it too soon so I cant wait a while.


Bookmarks

Posting Permissions

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