If you cannot use a server side language, you can try the following.
menu.html: (here, you must have href="menu.html?page1.html", href="menu.html?page2.html" etc. instead of href="page1.html", href="page1.html etc.; the menu is just an example)
Code:
...
<!-- We need the 100%-height/width to prevent all sorts of weird thing from happening in IE.
We have 'overflow:hidden' since the content files load in an object/iframe, which becomes the content's area with it's own scroll bar. -->
<style type="text/css">
body,html{overflow:hidden; height:100%; width:100%}
</style>
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css">
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css">
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css">
<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js">
/***********************************************
* All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
/*page1.html is the file that is supposed here to load first in the iframe/object. Adapt to your needs.*/
contentURL = document.URL.substring(document.URL.indexOf('?')+1, document.URL.length);
if (top.location == contentURL)top.location.href='menu.html?page1.html';
</script>
<!-- Give the iframe / object other styles, if you wish -->
<!--[if IE]>
<script type="text/javascript">
document.write('<iframe style="position:absolute;width:74%;height:78%;left:24.5%;top:18%; background:white" frameborder=0 src="' + contentURL +'"><\/iframe>');
</script>
<![endif]-->
<!--[if !IE]><!-->
<script type="text/javascript">
document.write('<object type="text/html" style="position:absolute;width:74%;height:78%;left:22.5%;top:18%; background:white;" data="' + contentURL + '"><\/object>');
</script>
<!--<![endif]-->
</head>
<body >
Your html-menu, together with:
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar")
</script>
and/or
<script type="text/javascript">
ddlevelsmenu.setup("ddsidemenubar", "sidebar")
</script>
</body>
</html>
Page1.html ((here, you must have <a href="#1" onclick="top.location.href='menu.html?page1.html'">Page 1</a>, <a href="#1" onclick="top.location.href='menu.html?page2.html'">Page 2</a>
etc. instead of <a href="page1.html">Page 1</a>, <a href="page2.html">Page 2</a> etc.; just an example):
Code:
<!-- Valid doctype --><html ><head><!-- meta, title etc. -->
<script type="text/javascript">
/* Needed for loading the menu (written in menu.html) on the page. You'd better make it external */
function orph(){
if (top.location == self.location)
top.location.href="index.html?" + document.URL
}
window.onload=orph;
</script>
</head>
<body >
PAGE 1<br>
"Aucassin et Nicolette", c'est l'histoire de deux « enfants » qui s'aiment et que tout sépare, bla bla. <br>
</body>
</html>
Page2.html (see page1 above):
Code:
<!-- Valid doctype --><html ><head><!-- meta, title etc. -->
<script type="text/javascript">
/* Needed for loading the menu (written in menu.html) on the page. You'd better make it external */
function orph(){
if (top.location == self.location)
top.location.href="index.html?" + document.URL
}
window.onload=orph;
</script>
</head>
<body >
PAGE 2<br>
Bla bla<br>
</body>
</html>
etc.
This technique for having a menu (called menu.html here) on each page of your side implies that all pages (other than menu.html) are embedded in the menu with the help of an iframe (IE) or text/html-object (non-IE).
Notes:
- In IE, this technique cannot be tested locally (= on the hard disk: the files don't show in the iframe; but there's NO problem on the Internet). So use Firefox for local testing.
- You can even load foreign files. To load Google from menu.html: href="menu.html?http://www.google.com"; from a link in page1.html, page2.html etc.: href="#1" onclick="top.location.href='menu.html?http://www.google.com'"
===
Arie Molendijk
Junior Coders
External Page on All Levels Navigational Menu (v2.1)
Posting Permissions
Reply With Quote
Bookmarks