Loading Drop down Menu From External File

Question

jonow 0 Junior Poster

16 Years Ago

Hi, I am trying to make a website were the menu is loaded from an external file so when you want to update the menu it gets updated on all the web pages. Something like and iframe but the problem is that the dropdown menu of an iframe will be inside the iframe and not in the webpage. Does anybody have a solution make an iframe work with this or another method of doing this? I am not going to use PHP or SSI at all. And I would like to stay away from using JavaScript, ALAX and alike, but I know the solution will probably have to use those. So if someone has suggestion (especially in basic languages like HTML and CSS) please post. Thank You

html-css web-design

6 Contributors
10 Replies
583 Views
1 Month Discussion Span
Latest Post 16 Years Ago Latest Post by FC Jamison

All 10 Replies

ZWheel 3 Newbie Poster

16 Years Ago

If you really do not want to use any of the technologies you mentioned then probably your only other option would be to use a WYSIWYG html editor which will handle it for you. For example in Dreamweaver I know you can create a "Library Item" which is just a block of html which you attach to other pages. Then when you want to change it you just edit the Library Item once and it changes it in all the pages you attached it to. Your still uploading whole pages though when you go to publish but at least you don't have to make all the edits manually.

Otherwise, I would suggest you go with a server-side solution. For such a simple task any server side language should do just fine, myself I am familiar with PHP and would do this: <?php include('menufile.html'); ?> That's as complicated as it need be. I actually used this to set up a very simple site at my workplace of the time where they could edit content by changing text files in notepad. This was years before I learned any other PHP commands.

Maybe you can come up with something using an iFrame plus javascript but if you do it's going to be really hacky and how well will you be able to rely on it working and looking the same across different web browsers? And what will it look like if they print the screen? Will it affect bookmarking? Mobile browsers (cellphones)?

Server side is nice because it's still straight html to the user.

ZWheel 3 Newbie Poster

16 Years Ago

jonow,
And can you test SSI withotu having it on a server.
No you can't. As the name implies, SSI is a server thing and for as far as I know, it can't work or tested without having an SSI enabled webserver.
PHP is also a server side thing. It normally runs on the webserver and yes, there are programs that, to some extend, show you what your php code would do in the real world. But to really test it, you do need a webserver.

A webserver is not a hard requirement to meet.

If you are on Windows and don't want to become a server guru I would recommend looking into the Abyss webserver by Aprelium. It's free, easy to setup and easy to integrate with Perl or PHP. Yes, Windows comes with IIS but if you have installed any service packs then the IIS version on your Windows CD will probably not install easily, Abyss is just going to be easier.

If you're on Linux of course Apache and PHP are a no-brainer. Your distro's package manager will probably configure it well enough for your needs right out of the box, again no server guru skills necessary (unless you want to host it on your own machine but I don't think you do).

No idea if your on a Mac. I doubt it's difficult there either, I just don't own one to try it.

Oh, and if the host you publish to doesn't provide any server side languages just dump them. Really... hosting is so cheap these days. You can probably get one which will fit your needs for < $10 US / month, if not then certainly for < $20.

FC Jamison 31 Posting Pro in Training

16 Years Ago

I included my dropdown menu with the following javascript:

<div id="menubar">
		<div id="menu"><script type="text/javascript" src="resources/javascripts/menu.js"></script></div>
		</div>

then the menu.js file was

menu();
	
	/* Begin Menu Items */
	
	tmenu[1]='Home';
	tlink[1]="http://www.frankjamison.com";
	tdesc[1]="Return to my homepage";
	ttype[1]="static";
	tiden[1]="";
	
	tmenu[2]='R&eacute;sum&eacute;';
	tlink[2]="http://www.frankjamison.com/resume/";
	tdesc[2]="View my r&eacute;sum&eacute;";
	ttype[2]="static";
	tiden[2]="";
	
	tmenu[3]='Portfolio';
	tlink[3]="http://www.frankjamison.com/portfolio/";
	tdesc[3]="View my portfolio";
	ttype[3]="static";
	tiden[3]="";
	
	tmenu[4]='Photo Gallery';
	tlink[4]="http://www.frankjamison.com/gallery/";
	tdesc[4]="Visit my photo gallery";
	ttype[4]="static";
	tiden[4]="";
	
	tmenu[5]='Poetry';
	tlink[5]="http://www.frankjamison.com/poetry/";
	tdesc[5]="Read my poetry";
	ttype[5]="static";
	tiden[5]="";
	
	tmenu[6]='Blog';
	tlink[6]="http://www.frankjamison.com/blog/";
	tdesc[6]="View my blog";
	ttype[6]="static";
	tiden[6]="";
	
	tmenu[7]='Contact';
	tlink[7]="http://www.frankjamison.com/contact/";
	tdesc[7]="Contact me";
	ttype[7]="static";
	tiden[7]="lastMenu";
	
	/* Thank you to Suckerfish & Patrick Griffiths for this code snippet */
	showMenu = function() {
		var subMenuItems = document.getElementById("topMenu").getElementsByTagName("li");
		for (var i=0; i<subMenuItems.length; i++) {
			subMenuItems[i].onmouseover=function() {
				this.className+=" showMenu";
			}
			subMenuItems[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp(" showMenu\\b"), "");
			}
		}
	}
	
	if (window.attachEvent) window.attachEvent("onload", showMenu);
	
	/* Create Menu Arrays */
	function menu() {
		tmenu = new Array();
		tlink = new Array();
		tdesc = new Array();
		ttype = new Array();
		tiden = new Array();
	}

	/* Create Dynamic Menu Length Variable */
	var MENU = tmenu.length;

	document.write('<div id="menu">');
	document.write('	<ul id="topMenu">');
	for (i=1; i < MENU; i++){
		if (ttype[i] == "dropdown") {
			document.write('<li class="topMenuLink"><a href="'+tlink[i]+'" class="'+ttype[i]+'" id="'+tiden[i]+'" title="'+tdesc[i]+'">'+tmenu[i][0]+'</a>');
			if (tiden[i] == "lastMenu") {
				document.write('<ul class="subMenu" id="last">');
			}
			else {
				document.write('<ul class="subMenu">');
			}
			for(j=1; j<tmenu[i].length; j++) {
				document.write('<li class="subMenuLink">'+tmenu[i][j]+'</li>');
			}
			document.write('</ul></li>');
		}
		else {
			document.write('		<li class="topMenuLink">');
			document.write('			<a href="'+tlink[i]+'" class="'+ttype[i]+'" id="'+tiden[i]+'" title="'+tdesc[i]+'">'+tmenu[i]+'</a>');
			document.write('		</li>');
		}
	}
	document.write('	</ul>');
	document.write('</div>');

I also included a footer using the same method and the document.write javascript as follows...

in the html file i added:

<script type="text/javascript" src="resources/javascripts/footer.js"></script>

and my footer.js file is:

<!-- Start JavaScript Code 

	// Script: Website Footer
	// Author: Frank Jamison
	// Date  : December 14, 2007
	
	// Stylesheets: stylesheet.css
	// Images     : button_xhtml11.png


	/* Write Footer Section to Web Page */
	document.write('<div id="copyright">');
	document.write('&copy;Copyright 2006-2008 All rights reserved<br>');
	document.write('<a href="http://www.frankjamison.com/" class="footerlink" title="Return to my home page">Frank C Jamison</a> ');
	document.write('/');
	document.write(' <a href="http://wwww.frankjamison.com/contact/" class="footerlink" title="Contact Frank Jamison">Contact</a><br>');
	document.write('</div>');
	
	document.write('<div id="w3cvalid">');
	document.write('<a href="http://validator.w3.org/check?uri=referer" target="new" title="Check the W3C validation for yourself!"><img src="http://www.frankjamison.com/resources/images/button_xhtml11.png" alt="Valid XHTML 1.1" height="31" width="88" /></a><br /> ');
	document.write('</div>');
	
// End JavaScript Code -->

I hope that helps.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

colweb 13 Posting Whiz · Answer 1 · 2009-02-20T00:33:04+00:00

Well, I'm doing just that with a new site I'm building. The menu is a huge drop down thing.

If you are hosting the site on Apache then (it needs to be turned on in the configuration), all you have to do is include something like this:

<body>

-- rest of your code --

See also this thread: http://www.daniweb.com/forums/thread162966.html, but I think he didn't understand it completely and is using php now.

Please ignore my answer. After typing it I read that you don't want to use SSI. What you want is simply not possible. There is no html code to include external files. And css is only there for styling. Maybe it's possible with an iframe and z-index. There is something about that here: http://www.webmasterworld.com/forum21/6457.htm.

jonow 0 Junior Poster · Answer 2 · 2009-02-20T06:10:14+00:00

Thank you, how would you set up SSI or PHP that is simple and small, if possible. And can you test SSI withotu having it on a server.

colweb 13 Posting Whiz · Answer 3 · 2009-02-20T06:46:00+00:00

jonow,

And can you test SSI withotu having it on a server.

No you can't. As the name implies, SSI is a server thing and for as far as I know, it can't work or tested without having an SSI enabled webserver.

PHP is also a server side thing. It normally runs on the webserver and yes, there are programs that, to some extend, show you what your php code would do in the real world. But to really test it, you do need a webserver.

jonow 0 Junior Poster · Answer 4 · 2009-02-20T13:03:59+00:00

Would it be inefficient to have an iframe for each drop down menu so you would have the drop down menu on the page but loading the contents from an external page into and iframe into the menu and and the sub-menus.

almostbob 866 Retired: passive income ROCKS · Answer 5 · 2009-02-25T08:08:42+00:00

in the iframe menu
'target='_top' will change the highest level url
target='_parent' will change the immediate parent window url

ergo
menuiframe.html

<a href='home.html' target='_top'>Home</a>
<a href='page1.html' target='_top'>page 1</a>
<a href='page2.html' target='_top'>page 2</a>
<a href='page3.html' target='_top'>page 3</a>

its just a matter of
Read The F(ine) Manual http://www.w3schools.com/tags/tag_a.asp

MJ Pieterse 2 Poster · Answer 6 · 2009-03-24T03:47:03+00:00

the only problem i would have with using an iFrame is that it would cut of your bottom content. i would suggest that you perhaps use Java (although you said that you didn't want to) and a master page, so you wouldn't have to include it on all the pages.

otherwise, if you are unwilling to do that, you could always chuck up a large amount of cash for componant art.

almostbob 866 Retired: passive income ROCKS · Answer 7 · 2009-03-24T06:06:15+00:00

put the menu,
which is a known size,
in an iframe top of the content pages,
not the content in an iframe at the bottom of the menu.
the content page will then size as neccessary

Loading Drop down Menu From External File

Recommended Answers Collapse Answers

All 10 Replies

Recommended Answers