How to impliment switch menu via external files

[chichi432]

1) Script Title: How to impliment switch menu via external files

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...switchmenu.htm

3) Describe problem: I have added image buttons and done some alterations to the visual appearance and everything seems to be working properly. I would like to have this vertical menu appear on every page of the website. How do I split up or convert this code? I would like to edit one external file and have the changes reflected through out the site.

I have spent days on researching this but having no luck. I cannot use php or ssi because my hosting company's server doesn't allow it. I can only use the basics.

Any help would be GREATLY appreciated! If this menu contents and links cannot be edited via external file, then maybe this is the wrong menu to use....and suggestions are welcome.

[ddadmin]

Well, the CSS and JavaScript code of Step 1 can both be easily moved to external .css and .js files. The more cumbersome portion would be the code of Step 2, which is normal HTML. You can use JavaScript to also dynamically write them out, but it means you'd have to extra careful with inadvertent line breaks or special characters (ie: apostrophes) inside the code, as they will break the script. So the drawback basically is that editing the menu becomes more troublesome than if you were editing it directly as regular HTML.

If you want to go that route, it'd be helpful to see what the HTML of your menu looks like; please post a link to what you have right now on your page.

[chichi432]

Thanks for the fast reply. Before we get into converting html into js, I was wondering about something I found the other day. "Save the code as menu.html and then insert that into each page of the website". If this may indeed be an option for me, then how do I insert or call the menu.html inside the page? Have had no luck with this either. I susspect it would be an <object> but I am only a beginner and are unaware of possibilities or actions.

If it is not a feasible option, then the following is the code I've got so far:

<style type="text/css">

#container{
background-image: url(http://this_is_my_background_frame_image.gif);
height: 1418px;
width: 174px;
border: none;
margin-left: 2px;
padding:15px;
}


.menutitle{
cursorointer;
margin-bottom: 5px;
background-image: url(http://this_is_my_graphic_button.gif);
color:#000000;
width:140px;
height:40px;
padding:20px;
text-align:center;
font-weight:bold;
}

.submenu{
background-color: lavender;
margin-side: 0.5em;
padding-top:5px;
padding-bottom:5px;
width:140px;

}
</style>

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

<!-- ---------------MENU NAMES & VALUES------------------------->

<!-- Keep all menus within masterdiv-->

<div id="container">

<div id="masterdiv">

<div class="menutitle" > <a STYLE="color:#000000" STYLE="text-decoration:none" HREF="index.htm" target="_parent"
>HOME</a></div>


<div class="menutitle" onclick="SwitchMenu('sub2')">Flavors</div>
<span class="submenu" id="sub2">
- <a href="PAGE NAME.HTM" target="_parent"
>NAME</a><br>
- <a href="PAGE NAME.HTM" target="_parent"
>NAME</a><br>
- <a href="PAGE NAME.HTM" target="_parent"
>NAME</a><br>
</span>

<div class="menutitle" onclick="SwitchMenu('sub3')">Cake Designs</div>
<span class="submenu" id="sub3">
- <a href="PAGE NAME.HTM" target="_parent"
>NAME</a><br>
</span>

<div class="menutitle" onclick="SwitchMenu('sub4')">Ornaments</div>
<span class="submenu" id="sub4">
- <a href="PAGE NAME.HTM" target="_parent"
>NAME</a><br>
- <a href="PAGE NAME.HTM" target="_parent"
>NAME</a><br>
- <a href="PAGE NAME.HTM" target="_parent"
>NAME</a><br>
</span>

</div>

[ddadmin]

"Save the code as menu.html and then insert that into each page of the website". If this may indeed be an option for me, then how do I insert or call the menu.html inside the page?

Most likely they're talking about using some server side feature to do this, such as SSI or PHP. But you did say your web host doesn't support either.

Come to think of it, another way would be to still save the HTML portion of th e menu as a separate file (ie: "menu.htm"), then include it using Ajax. Using this script in combination with Switch Menu, you can do this:

<link rel="stylesheet" type="text/css" href="switchmenu.css" />

<script src="switchmenu.js" type="text/javascript"></script>

<body>

<script type="text/javascript">
ajaxinclude("menu.htm")
</script>

</body>

I've attached all files involved below. Depending on the pages you'll be including the menu, you may wish to switch to an absolute reference to "menu.htm" on your server, by doing:

<script type="text/javascript">
ajaxinclude(rootdomain+"/include/menu.htm")
</script>

where rootdomain is dynamically substituted with your site's domain (don't change).