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

Thread: Switch Menu

  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Switch Menu

    Hi everyone.

    I'm trying to install a menu for my website. I am using a script I found here: http://www.dynamicdrive.com/dynamici...switchmenu.htm.

    The code works great, but I would like to customize it slightly. Instead of being a vertical menu, I would like it to be a horizontal one, with all the main links at the top of the page, and with each link opening a horizontal sub menu beneath it.

    I managed to create a horizontal list by changing the 'div' to 'span' and altering the HTML and CSS slightly. Now I have a horizontal menu that opens submenus when I click!

    My only problem now is that instead of opening each submenu below all the links, it opens it below the link in question. So, for instance, let's say I have three links: Info, About, and Contact. If I click on 'About', it opens up a submenu under Info and About, and pushes Contact down to a new line below the submenu. If I then click on 'Info', it closes the previous submenu and opens a new one below Info, with About and Contact in a new line.

    My JavaScript skills are pretty poor, so I was wondering if someone could help me identify where in the JavaScript I need to make changes so that the the submenus open below ALL the menu elements.

    Please ask for clarification if I'm being unclear, or let me know if there's an easier way to do what I'm doing. Thank you!

    The JavaScript portion is below.

    Code:
    <script type="text/javascript">
    
    /***********************************************
    * Switch Menu script- by Martial B of http://getElementById.com/
    * Modified by Dynamic Drive for format & NS4/IE4 compatibility
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
    var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
    
    if (document.getElementById){ //DynamicDrive.com change
    document.write('<style type="text/css">\n')
    document.write('.submenu{display: none;}\n')
    document.write('</style>\n')
    }
    
    function SwitchMenu(obj){
    	if(document.getElementById){
    	var el = document.getElementById(obj);
    	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
    		if(el.style.display != "block"){ //DynamicDrive.com change
    			for (var i=0; i<ar.length; i++){
    				if (ar[i].className=="submenu") //DynamicDrive.com change
    				ar[i].style.display = "none";
    			}
    			el.style.display = "block";
    		}else{
    			el.style.display = "none";
    		}
    	}
    }
    
    function get_cookie(Name) { 
    var search = Name + "="
    var returnvalue = "";
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) { 
    offset += search.length
    end = document.cookie.indexOf(";", offset);
    if (end == -1) end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }
    
    function onloadfunction(){
    if (persistmenu=="yes"){
    var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
    var cookievalue=get_cookie(cookiename)
    if (cookievalue!="")
    document.getElementById(cookievalue).style.display="block"
    }
    }
    
    function savemenustate(){
    var inc=1, blockid=""
    while (document.getElementById("sub"+inc)){
    if (document.getElementById("sub"+inc).style.display=="block"){
    blockid="sub"+inc
    break
    }
    inc++
    }
    var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
    var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
    document.cookie=cookiename+"="+cookievalue
    }
    
    if (window.addEventListener)
    window.addEventListener("load", onloadfunction, false)
    else if (window.attachEvent)
    window.attachEvent("onload", onloadfunction)
    else if (document.getElementById)
    window.onload=onloadfunction
    
    if (persistmenu=="yes" && document.getElementById)
    window.onunload=savemenustate
    
    </script>

  • #2
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    Here's another way change the nested divs to an unorderd list sorta like

    Code:
    <ul id="masterdiv">
    
    	<li class="menutitle" onclick="SwitchMenu('sub1')">Site Menu
    	<span class="submenu" id="sub1">
    		- <a href="new.htm">What's New</a><br>
    		- <a href="hot.htm">What's hot</a><br>
    		- <a href="revised.htm">Revised Scripts</a><br>
    		- <a href="morezone/">More Zone</a>
    	</span>
    	</li>
    
    	<li class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help
    	<span class="submenu" id="sub2">
    		- <a href="notice.htm">Usage Terms</a><br>
    		- <a href="faqs.htm">DHTML FAQs</a><br>
    		- <a href="help.htm">Scripts FAQs</a>
    	</span>
    	</li>
    
    	<li class="menutitle" onclick="SwitchMenu('sub3')">Help Forum
    	<span class="submenu" id="sub3">
    		- <a href="http://www.codingforums.com">Coding Forums</a><br>
    	</span>
    	
    	<li class="menutitle" onclick="SwitchMenu('sub4')">Cool Links
    	<span class="submenu" id="sub4">
    		- <a href="http://www.javascriptkit.com">JavaScript Kit</a><br>
    		- <a href="http://www.freewarejava.com">Freewarejava</a><br>
    		- <a href="http://www.cooltext.com">Cool Text</a><br>
    		- <a href="http://www.google.com">Google.com</a>
    	</span>
    	</li>
    
    </ul>
    tweak the css a bit
    Code:
    .menutitle{
    cursor:pointer;
    margin-bottom: 5px;
    background-color:#ECECFF;
    color:#000000;
    width:140px;
    padding:2px;
    text-align:center;
    font-weight:bold;
    float:left;
    /*/*/border:1px solid #000000;/* */
    }
    #masterdiv {
    width:800px;
    }
    .submenu{
    margin-bottom: 0.5em;
    text-align:left;
    }
    and you can achieve something similar to what you want
    You never have to change anything you got up in the middle of the night to write. -- Saul Bellow

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Shyam,

    Thank you very much for your effort on this.

    It is nice that your code fixes the problem of shunting the following buttons down a line (though I noticed some problems if I add so many buttons that it creates a new line, easily fixed by altering the size of the buttons or enlarging the field it is in. Might cause trouble for people who browse with larger text).

    It's not what I'm looking for, aesthetically, though.

    I'd really like for the submenu to not be confined to the width of the button it's attached to--but to rather expand into a full horizontal bar beneath. This would create, in essence, two menus, one on top of the other. My idea then, is that the 'active' menu would have a different background color to identify it, the same as the menu beneath it.

    ----Menu----Info-----Order-----Contact-----Monkeys----
    ----Submen----Something----Whatev----Littleleague-----

    Again, any help I could recieve would be very much appreciated.


  •  

    Posting Permissions

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