View Full Version : Switch Menu

05-14-2007, 09:43 PM
Hi everyone.

I'm trying to install a menu for my website. I am using a script I found here: http://www.dynamicdrive.com/dynamicindex1/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.

<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')

function SwitchMenu(obj){
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";
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!="")

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)

if (persistmenu=="yes" && document.getElementById)


05-15-2007, 10:44 AM
Here's another way change the nested divs to an unorderd list sorta like

<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>

<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>

<li class="menutitle" onclick="SwitchMenu('sub3')">Help Forum
<span class="submenu" id="sub3">
- <a href="http://www.codingforums.com">Coding Forums</a><br>

<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>


tweak the css a bit

margin-bottom: 5px;
/*/*/border:1px solid #000000;/* */
#masterdiv {
margin-bottom: 0.5em;

and you can achieve something similar to what you want

05-17-2007, 08:15 PM

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.


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