Menu-include without scripting or server side language

**molendijk** · 01-14-2009, 05:16 PM

1) CODE TITLE: Menu-include without scripting or server side language

2) AUTHOR NAME/NOTES: Arie Molendijk

3) DESCRIPTION: Technique for including a html-menu on each page of our site with the help of an object (non-IE) or iframe (IE). What's included is not something that is 'extracted' from some file or written to our page (techniques used with a hidden iframe or with an Ajax-request), but a real object or frame (i.e. not just the object's / iframe's content). Yet, there are no restrictions as to the window-space that can be used by the unfolded menu. The technique used here implies that all the js and css of the included menu is preserved during inclusion. So there's no need to import js or css to our content's pages in order for the menu to function and show correctly. We just include a stand-alone menu (a listmenu, normally) with the help of an object or iframe. That is: <object ... data=menu.html...></object> and <iframe ... src="menu.html"...></iframe>..

Notes:
- We DO need some javascript, but we don't need it for including the menu.
- The menus used here for illustration purposes are DD's Smooth Navigational Menu and DD's AnyLink Vertical Menu.

4) URL TO CODE: http://molendijk.110mb.com/include_m...oth/page1.html

**klaypigeon** · 02-02-2009, 05:27 AM

Thanks, it looks great. The horiz menu has been renamed I believe. I am having some issues with the div=content not displaying an iframe correctly. But I won't bug you with that. I will post a link when I am further along.

**molendijk** · 02-02-2009, 11:09 AM

Glad I could help so far. It seems indeed that the solution given here does not work for the Smooth Navigational Menu.
There may be minor issues with the solution you're trying now, but they don't seem unresolvable.
===
Arie.

**molendijk** · 02-02-2009, 12:05 PM

Using the Smooth Navigational Menu, you could also do something like this (with Ajax):

menu.html:

Code:

<!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">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Some title</title>
<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" ></link>
<style type="text/css">
body{background-color:transparent;width:100%;height:100%;font-family:verdana;font-size:11px}
</style>

<!--[if lte IE 7]>
<style type="text/css">
html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="ddsmoothmenu.js">

/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

</head>

<body>

<div  

style="position:absolute;top:30px;display:inline;left:50%;margin-left:-235px;width:470px;border:5px 

solid red" id="smoothmenu" class="ddsmoothmenu" >

<ul>
<li><a href="#" onclick="top.location.href='page1.html'">Page 1</a></li>
<li><a href="#" onclick="top.location.href='page2.html'">Page 2</a></li>
<li><a href="#" onclick="top.location.href='page3.html'">Page 3</a></li>
<li><a href="#">Folder 0</a>
<ul>
<li><a href="#">Sub Item 0.1</a></li>
<li><a href="#">Sub Item 0.2</a></li>
<li><a href="#">Sub Item 0.3</a></li>
<li><a href="#">Sub Item 0.4</a></li>
<li><a href="#">Sub Item 0.5</a></li>
<li><a href="#">Sub Item 0.6</a></li>
<li><a href="#">Sub Item 0.7</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<br style="clear: left" >
</div>
</body>
</html>

Pages that must include the menu:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ajx + document.write</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript">
document.includeWrite = function (url) {
if ('undefined' == typeof(url)) return false;
if (window.XMLHttpRequest)reqWrite = new XMLHttpRequest()
else if (window.ActiveXObject){
try {
reqWrite = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
reqWrite = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
reqWrite.open("GET",url,false);reqWrite.send(null);

document.write( reqWrite.responseText);
}

</script>

</head>

<body>
<script type="text/javascript">document.includeWrite('menu.html')</script> 
</body>

</html>

Make sure to have

ddsmoothmenu.init({

	mainmenuid: "smoothmenu", //menu DIV id

	//customtheme: ["#1c5a80", "#18374a"], //override default menu CSS background values? Uncomment: ["normal_background", "hover_background"]

	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]

})

at the end of ddsmoothmenu.js
===
Arie.

Thread: Menu-include without scripting or server side language

Thread Tools

Search Thread

Menu-include without scripting or server side language

The Following User Says Thank You to molendijk For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions