How to have a common menu file [Archive]

View Full Version : How to have a common menu file

Eddie11

07-22-2011, 07:08 PM

I want to make a non-java menu that I can modify 1 file and have the changes effect all the pages.
Is this even possible? and if so, how can I do it?

I currently have a small site with few pages, but I know that can change fast.

I want to plan ahead by making it easy to add or edit menu options.
That way I don't have to keep changing every pages menu each time.

molendijk

07-22-2011, 09:02 PM

Do you mean a a non-java menu or a a non-javascript menu?
===
Arie Molendijk.

Eddie11

07-22-2011, 09:13 PM

java script.

I was scanning over the hundreds of pages in this forum and found a similar question.

The answer to that was php

Is there any code already available for copy paste or is it something I just have to learn how to code php?

molendijk

07-22-2011, 09:30 PM

Yes, use php if you don't want to use javascript.
I'm not a php-expert, but I know how to do php-includes. It's rather easy. But before going into the details: do you want to exclude javascript everywhere, even in the menu?
===
Arie.

Eddie11

07-22-2011, 10:43 PM

I would like to avoid the use of Java script, yes.

I have a rather simple menu currently.

http://epic11.com if you want to see it.

like a mentioned at start. I only have a few pages currently.

griffinwebnet

07-22-2011, 10:56 PM

ok i know that you dont want to use javascript but i guarantee you this is an extremely simple fix that i have used for a long time! and it doesnt mess up layouts or anything.

This Goes in index.html (or any of your other pages) and it goes in place of the code for your navigation menu.

<script language="javascript" type="text/javascript"
src="/path to the file/nav.txt"></script>

this is the code in nav.txt

document.write(' <ul> <li> <a="href:blablabla"> BlaBlaBla </a> </li>  ')

All of the html code in nav.txt MUST BE ON ONE LINE. Basically dont press enter. your text editor may word wrap it into many lines, but as long as you dont press enter, the browser will treat it as one line.

That will put your navigation menu into one file that will update to all the pages at the same time.

Hope this helps!

-JL Griffin

griffinwebnet

07-22-2011, 11:24 PM

Yes, use php if you don't want to use javascript.
I'm not a php-expert, but I know how to do php-includes.

im not entirely sure how you would use a php-includes that would make it A) easy and B) automated.

you could use it to set up a variable for each link and then set the location in the anchor tag to the value of the included variable. which would theoretically work if he were to change the location of the pages via the included file, however, if he were to add a new page, he would still have to go to each page and add the link to the variable... that would be the simplest way, there are other better ways, but they are WAY too dificult for someone who doesnt know php at all...

Yes, use php if you don't want to use javascript.
Also I Disagree with this statement... php is a server-side scripting language and should be avoided unless necessary... I would have to advise against the use of php for a client side goal like this as it would waste resources... unforutnately javascript is the way to go with this stuff.

-JL Griffin

Eddie11

07-22-2011, 11:29 PM

I will give that a try.

I was told that java script is not a good idea to use for menus because allot of people have java disabled on their browsers.

molendijk

07-23-2011, 12:30 AM

Hello griffinwebnet and Eddie11,
I think there are a couple of things I should make clear here.

1.
Including an external file via document.write is a bronze age method that I use myself, but it is still bronze-age and discouraged by many people. This is what http://dev.w3.org/html5/spec/Overview.html#document.write says about it:
This method has very idiosyncratic behavior. In some cases, this method can affect the state of the HTML parser while the parser is running, resulting in a DOM that does not correspond to the source of the document. In other cases, the call can clear the current page first, as if document.open() had been called. In yet more cases, the method is simply ignored, or throws an exception. To make matters worse, the exact behavior of this method can in some cases be dependent on network latency, which can lead to failures that are very hard to debug. For all these reasons, use of this method is strongly discouraged.

2.
Php is a server-side scripting language and should therefore be used if possible.

3.
Php-includes are easy and automated by definition. I can give you an example if you like.

4.
The menu used by Eddie11 is rather simple: no submenus. So Eddie11 can use an iframe on each of his pages to embed his menu. No javascript and no php needed.

===
Arie.

griffinwebnet

07-23-2011, 02:51 AM

I will give that a try.

I was told that java script is not a good idea to use for menus because allot of people have java disabled on their browsers.

that is differant though, there is a differance between JRE and Javascript. Having Java disabled means that java applets wont run, however javascript doesnt use the java framework, all modern browsers have javascript installed and enabled by default. you can see that here:

http://www.computerhope.com/issues/ch000891.htm

I use javascript in almost all of my menus nowadays.

griffinwebnet

07-23-2011, 03:06 AM

Including an external file via document.write is a bronze age method [

I completely agree with you on that. i just figured it would be an easy and effective solutioin for him.

Php is a server-side scripting language and should therefore be used if possible.

I semi-Agree. however in a situation like this i know that i wouldnt solve the problem with php. but that is a debate for a differant thread. :)

Back to His problem i think your solution is a great idea, it is tricky though for seamless integration, as the i frame has that annoying border. I believe you are right though about that being the best solution.

JL Griffin

molendijk

07-23-2011, 03:49 PM

Hi Eddie / griffinwebnet,
I don't think the iframe-border is a problem, since we can put frameborder="0".

Eddie, if you put the following in your files, then everything will work fine:
menu.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="tswtabs.css">
<title>Navigation</title>
</head>
<body>
<div id="tswcsstabs">
<ul>
<li><a href="javascript: void(0)" onclick="top.location.href='index.html'">HOME</a></li>
<li><a href="javascript: void(0)" onclick="top.location.href='links.html'">My Links</a></li>
<li><a href="javascript: void(0)" onclick="top.location.href='news.html'">Site News</a></li>
<li><a href="javascript: void(0)" onclick="top.location.href='http://epic11.com/wordpress'">My BLOG</a></li>
<li><a href="javascript: void(0)" onclick="top.location.href='http://epic11.com/coppermine'">My Pictures</a></li>
</ul>
</div>
</body>
</html>
index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-us"><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"><title>EPIC11 Home page</title>

<meta content="Eddie" name="author">
<link rel="stylesheet" type="text/css" href="tswtabs.css">
<meta name="description" content="Eddie & Penny's Internet Cafe 2011 - EPIC11. This is not an internet cafe site. There is no physical location. That was an idea we had a few years ago.">
</head>
<body style="color: white; background-color: black;" alink="#3333ff" link="#0000ff" vlink="#cc33cc">

<div style="text-align: center;"><img style="width: 579px; height: 308px;" alt="Welcome to epic11.com" src="scroll-Epic11.jpg" align="middle"><br>
<br>
<br>
<br>
<br>
<font style="color: rgb(0, 153, 0);" size="+2">Fly
your colors on the important days. (example: July 4th)<br>

<br>
<img style="width: 132px; height: 90px;" alt="USA flag" src="flag2.gif" align="middle"><br>
<br>
<br>
<br>




<iframe src="menu.html" style="width:450px; height:60px" frameborder="0"></iframe>


<br>
<br>
<br>
<br>
</font>**************************<br>
<br>

<font style="color: rgb(0, 0, 153);" size="+1"><span style="color: rgb(204, 0, 0);">Eddie
& Penny's Internet Cafe 2011 - EPIC11</span><br>
<br>
<span style="color: yellow;">This is not an internet cafe
site. There is no physical location.</span><br style="color: yellow;">
<span style="color: yellow;">That was an idea we had a few
years ago.</span><br style="color: yellow;">

<span style="color: yellow;">After some research, we
decided that it was a bad investment.</span><br style="color: yellow;">
<span style="color: yellow;">However, I liked the name and
it stuck with me.<br>
<br>
<span style="color: rgb(0, 153, 0);">I started this web
site on March 28, 2011</span><br>
</span></font><br>
***********************************<br>
<br>

<form method="get" action="http://search.yahoo.com/search">
<table style="width: 476px; height: 87px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>

<div style="border: 1px solid rgb(153, 153, 153); padding: 5px 4px 5px 3px;"><a href="http://search.yahoo.com/"><img src="ysanlogo.gif" align="middle" border="0" alt=""></a><input name="p" size="29" type="text"><input name="fr" value="yscpb" type="hidden"><input value="Search" type="submit"><br>
<div style="text-align: center;"><font face="arial, helvetica" size="-2"><input name="vs" style="vertical-align: middle;" value="" checked="checked" type="radio">Search the web <input name="vs" style="vertical-align: middle;" value="http://epic11.com" type="radio">Search this
site</font></div>
</div>
</td>
</tr>
</tbody>
</table>
<div style="text-align: center;"><font size="+2"></font><br>
</div>
</form>
</div>
</body>
</html>
links.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-us"><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"><title>EPIC11 Links</title>
<meta content="Eddie" name="author">
<link rel="stylesheet" type="text/css" href="tswtabs.css">
</head>
<body style="color: white; background-color: black;" alink="#3333ff" link="#0000ff" vlink="#cc33cc">
<div style="text-align: center;"></div>
<br><br>
<div style="text-align: center;">




<iframe src="menu.html" style="width:450px; height:60px" frameborder="0"></iframe>


</div>

<br>

<form method="get" action="http://search.yahoo.com/search"><br>
<table style="height: 87px; width: 476px;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div style="border: 1px solid rgb(153, 153, 153); padding: 5px 4px 5px 3px;"><a href="http://search.yahoo.com/"><img src="ysanlogo.gif" align="middle" border="0" alt=""></a><input name="p" size="29" type="text"><input name="fr" value="yscpb" type="hidden"><input value="Search" type="submit"><br>
<div style="text-align: center;"><font face="arial, helvetica" size="-2"><input name="vs" style="vertical-align: middle;" value="" checked="checked" type="radio">Search the web <input name="vs" style="vertical-align: middle;" value="http://epic11.com" type="radio">Search this
site</font></div>
</div>
</td>
</tr>
</tbody>
</table>
</form>
<font size="+2">
<br>
<br>
<a target="_blank" href="http://www.frugalbayou.info">www.frugalbayou.info</a>
<big style="color: rgb(0, 153, 0);">- </big></font><font style="color: rgb(0, 153, 0);" size="+2">Good
information on saving money.</font><br>
<font size="+2"><br>
<a href="http://client4.addonchat.com/chat.php?fs&id=511708" target="_blank">Java based chat room ( mostly used for
pre-arranged private chats )</a><br>

<br>
<a target="_blank" href="http://epic11.proboards.com">My
forums link</a><br>
<br>
<a target="_blank" href="http://www.dynamicdrive.com">free
original DHTML
scripts and components
</a><a href="http://www.dynamicdrive.com"><img style="border: 0px solid ; width: 88px; height: 30px;" alt="Dynamic drive" src="dynamic.gif" ></a><br>
<br>

<a href="http://www.thesitewizard.com/" target="_blank">Website
Design, Promotion, Revenue and Scripting Tips</a> <span style="color: yellow;">- Lots of free
tips, tutorials and articles on every aspect of your website.</span><br>
<br>
<a target="_blank" href="http://www.neworleanssaints.com">The
official
site of the New Orleans Saints</a><br>
<br>
<a target="_blank" href="http://www.contrabanddays.com">The
site I goto
for contraband days info.</a><br>

<br>
<a target="_blank" href="http://www.mardigras.com">The
site I goto
for Mardi Gras info.</a><br>
<br>
<a target="_blank" href="http://epic11.com/egg.html">This
is my Easter egg
hunt page.</a> - Find the egg.<br>
<br>
<a target="_blank" href="http://www.ccfa.org">Learn about Crohn's and colitis here.</a></font><font size="+2">
</font>
<div style="text-align: center;"><font size="+2"><img style="width: 139px; height: 88px;" alt="Crohn's and Colitis" src="crohns%20ribbon.jpg"></font></div>
<font size="+2">
</font>
</body>
</html>
news.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-us"><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>EPIC11 News</title>

<meta content="Eddie" name="author">
<meta content="The latest news about this site." name="description">
<link rel="stylesheet" type="text/css" href="tswtabs.css"></head>
<body style="color: white; background-color: black;" alink="#3333ff" link="#0000ff" vlink="#cc33cc">

<br><br>
<div style="text-align: center;">



<iframe src="menu.html" style="width:450px; height:60px" frameborder="0"></iframe>

</div>

<br>
<br>
<font style="color: rgb(0, 153, 0);" size="+3">Last
modified on July 22, 2011<br>
<br>
<br>
</font>
<div style="text-align: left;"><font size="+2">Changed
to menu buttons instead of just links on 7/15/11<br>
<br>

Added Yahoo search box to main page and Link page on 7/8/11<br>
<br>
Created a photo album on 7/4/11<br>
<br>
Remade
Links page and this page on 6/26/11<br>
<br>
Validated site through http://validator.w3.org on 6/19/11<br>
<br>
Remade web site using Kompozer on 6/19/11<br>
<br>
Started a BLOG page on 5/3/11<br>

<br>
Added a calendar on 4/22/11<br>
<br>
Started a Forums through Proboards.com on 4/22/11<br>
<br>
</font></div>
</body></html>
Your menu is loaded in the iframed menu.html. Whenever you modify the menu, the changes will be visible on all your pages.
I adapted the size of the iframe to the size of your menu. You may have to change that if you modify your menu.
I put your modified site on my server (as a demo), see THIS (http://www.let.rug.nl/molendyk/epic11). I will remove it if you want me to do so.
My BLOG and My Pictures take a while to load, or don't load at all, but that's not the fault of the menu. Maybe you removed epic11.com?
===
Arie.

Eddie11

07-24-2011, 12:41 AM

yes, my current menu is simple. mainly because I only have a few pages and went the easy rout. I do however recognize that, down the road, I may end up with hundreds of pages. A simple menu would no longer be prevalent. I am trying to plan ahead and make a menu that would be much more flexible and let people navigate my site easy. At the same time, I don't want to have to change the menu on every page each time I add pages. That being said, I have very limited skills in building pages. I like to focus more on content then try and learn new languages. Most of what my pages I currently have is do to using page building software and copy/pasting free code.

Eddie11

07-24-2011, 01:18 AM

I just tried it on a test page on my site and also clicked on your copy. both have the menu a little messed up. But after tweaking that code, I think it is exactly what I am looking for. Thank you very much. :)

Eddie11

07-24-2011, 02:03 AM

Tested with firefox and got distorted look.
Tested with IE and looks fine.

molendijk

07-24-2011, 04:59 PM

yes, my current menu is simple. mainly because I only have a few pages and went the easy rout.
Even if you put a large number of links in menu.html, the iframe-include will work. The only problem is that your iframe will be big if the menu inside it is big.

Tested with firefox and got distorted look. Tested with IE and looks fine.
In case of a distorted look, just make the iframe a little bit wider and/or give it more height.
===
Arie.

Eddie11

07-25-2011, 11:50 PM

I decided to go with Tigramenu.
I searched the net for 2 days. Tigramenu came the closest to what I was looking for. Am thinking about buying pro or gold version. But for now I will settle on the free version.
Thanks for every ones help that helped. I have used other codes from this site and have linked to this site.

molendijk

07-26-2011, 12:53 PM

I decided to go with Tigramenu.
You do realize that the Tigra Menu is a JavaScript navigation system?
===
Arie.

griffinwebnet

07-29-2011, 05:13 PM

You do realize that the Tigra Menu is a JavaScript navigation system?
===
Arie.

Again Though, a JavaScript menu isn't a problem. He was concerned that it wouldn't work because of people having java disabled, but that isn't a problem because disabling java doesn't effect javascript. So its all good.

Eddie11 I'm Very glad you found what you were looking for. :)

-JL Griffin