Use one instance of the menu for multiple pages?

[gazanson]

1) Script Title: Switch Menu II

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

3) Describe problem: Does anyone know how to link from many pages to one instance of the menu rather than have to place the menu on every page? If doable, what do you do with the menu scripting wise? (I assume this won't interfere with 'persistence'?) Any thoughts much appreciated. Gary

[jscheuer1]

There are various ways. The best would be to use a server side include to write the menu's markup on each page where you want it to appear. Second best would be to use frames or an iframe to allow the menu to appear on or along side any page. Worst would be to make up an external script to write the menu on any given page.

With all three methods, the link paths on the menu would have to be written as absolute links, unless all the pages that would use the menu would be in the same directory (best to assume that, if not now, at some point in the future, that they won't be so - use absolute paths).

Server side includes require that you have a server side language at your disposal (many hosts provide at least one) and are somewhat familiar in its use. Server side includes can be a little finicky when it comes to initializing their content with a client side script on the page but, usually will work OK if the initialization call and any style is linked directly to the page, rather than to the include.

Frames of any type present layout challenges as a menu such as this cannot expand across the boundary of its containing frame or iframe. Also targeting of the menu links becomes an important issue when the links are contained in a frame of any type.

Using an external javascript to generate the menu on any given page makes your pages unnavigable to anyone without javascript enabled.

Finally, this menu is a bit flawed to begin with in that any hidden menus can never be seen if javascript isn't enabled.

An alternative would be to use an editor that can bulk edit your pages with the menu on it. Paths would still be best written in absolute terms. Some minor modifications should be able to be made to make this menu accessible for non-javascript enabled browsers. These modifications would work with all methods except the external javascript method.

[gazanson]

Thank you for your advice John. Would you mind expanding a bit on your suggestion that: "Server side includes can be a little finicky when it comes to initializing their content with a client side script on the page but, usually will work OK if the initialization call and any style is linked directly to the page, rather than to the include".

I think this is the way I will go, so any elaboration on these points would be fantastic.

Many thanks for your time.

Gary

[jscheuer1]

Sure! The temptation with a server-side include is to get it to 'do all the work' for you. So, what folks often will try is to put a stylesheet link, an external script call and the markup for (in this case) the menu - all on one include page and then include that wherever the menu is desired. If all of your paths are absolute, this can sometimes work but, often it is just too much to expect.

With this script, the style link belongs in the head of the page. It is just one short line so, if it gives you any problem as an include (it could possibly be in a separate include for the head), just hard code it into the head of each page, this is the best way, hard coding the:

<link rel="stylesheet" type="text/css" href="http://www.mydomain.com/style/sddm.css" >

into the head of each page that will use the menu.

Same thing with the script call except that it must be after the markup for this script. So, you could try putting it at the end of the markup in the include or putting it in an include that is used at the bottom of the page but, as it too is just one line, the best way is to put it on each page, just after the call to the include for the markup. Here is a rough overview of the ideal situation on a page using this menu via an include:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >

<link rel="stylesheet" type="text/css" href="http://www.mydomain.com/style/sddm.css" >
<title>JSwitch Slide Menu</title>
</head>

<body>
<% your include code here for the menu's HTML markup %>
<script type="text/javascript" src="http://www.mydomain.com/scripts/xpmenuv21.js"></script>
</body>
</html>

Now, as I mentioned, you may be able to get away with putting the script call and the style link on the include page or on separate includes that would place them in the appropriate spots on the page but, the above is the safest method.

Notes: Notice the use of absolute paths in the style link and script call. These are the type of paths that should be used in the menu's markup as well. I also mentioned before that this script will be partially inaccessible to non-javascript enabled browsers no matter how it is used if any of the menus are initially not shown:

<div class="subMenu" style="display:none;">

Anything like the above in the markup will have this problem. Best to use:

<div class="subMenu hide">

and have a separate script linked to the head with this code:

document.write('<style type="text/css">\n'+
'.hide {\n'+
'display:none;\n'+
'}\n'+
'<\/style>')

That way the subMenu will only be hidden if javascript is enabled.

[gazanson]

Crikey! (as we say in Australia) This is great! Really! You're unbelievably generous with your time and ideas and explanation John. (You don't run a sleigh and reindeers do you come December?) Thanks a million. Gary

[illegal operations]

I know this is an old post, but hopefully someone might be able to help me with this script.

I'm trying to get my menu states to work across different pages, that could be in different directories.

I can't get it to work.

For testing I have 3 pages, 2 are in the same directory (these work fine). Then I have a 3rd page in another directory.

The 3rd page, will not remember the state of the other 2.

I've tried using the full absolute path to the JS, and it makes not difference.
I also tried using the full path to the .css, and it still doesn't work.

Shouldn't this work across an entire site?