A better way putting a menu bar, on every page

Joolsd186 · #1 (**permalink**) Oct 14th, 2006, 14:13

Hi sorry for the noob question again.

I have been working on large website, lots of pages. It looks great, i'm pleased with the design, but I feel I could be doing things a bit more effectively.

For example I have a side menu, with about 8 links in it created from splitting the cell.
However I was wondering if there is a way of doing the menu just once, then linking it to all the pages, so if I need to add a new link I don’t have to edit all the pages. I know it can be done, with framesets, but would like to avoid this if possible.

If I have a menu on its own, can it be saved and then linked,to the other pages?

Thank you

Lchad · #2 (**permalink**) Oct 14th, 2006, 14:56

Can you just copy the table or cells and then paste it into the new page?
Or you could make up a template of the first page and just use the template to make up the new pages.

Joolsd186 · #3 (**permalink**) Oct 14th, 2006, 16:40

Hi thanks for the reply

The way you said is exactly what I have done. When I first started the site, I was very careful to make sure that all the links were placed in. However the peoples whos web page it is, want to put another link in. Ouch! hehehe!

Etheir way i am going to have to open each page and paste or duplicate (as you said) the new link in one way or another. I was just thinking in the long term, was there a better way of setting up the page, so now, there is an amendment, it only will take 30 seconds to do instead of an hour.

The website must not for techical reasons use frames. The only good thing about frames was the ease of which the one menu html was editable. Do you see what I mean?

I throught I remebered seeing sombody do this with a normal html page, but maybe I dreamt it lols.

bruno89 · #4 (**permalink**) Oct 14th, 2006, 19:48

lol iv bin looking for the same thing i havnt found anything as yet tho iv only bin lookin for a few days tho if i find anything ill tell you mate

Joolsd186 · #5 (**permalink**) Oct 14th, 2006, 20:00

After a lot of googleing I came across IFRAME tags. It looks promising in that it might save time.
Its a bit like a frame set but you can put it inside an ordinary page.

I have inserted a tag then it lets you choose the iframe option, then you can link to the menu.htm
The trouble with it is that you can't see it untill you preview the page.

I have seen it in use many times, but haven't really used it at all. Are there any problems with this device?

Joolsd186 · #6 (**permalink**) Oct 15th, 2006, 01:24

Before I get too pleased with myself, will the IFRAME hinder the seach engines? There are tags in the main index.htm, (noframes part of the code) the iframe is just an element on the page, so will, this affect the search?

Ryan Fait · #7 (**permalink**) Oct 15th, 2006, 01:45

Use PHP! It's definitely the best way of doing this.

First of all, you need to change all of the extensions from .html to .php. Then in, say, your main page, add this:

PHP: Select all


<html>
    <p>Content above your navigation</p>
<?php
include $_SERVER["DOCUMENT_ROOT"]."/path/to/menu.php";
?>
    <p>Content below your navigation</p>
</html>

Then this would be menu.php:

Code: Select all

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

QuikFrozen · #8 (**permalink**) Oct 15th, 2006, 05:07

It can also be done with javascript. You'll have to write a .js document with the code that generates the menu, something like:
document.write("<ul><li><a href='#'>Home</a></li>");
document.write("<li><a href='#'>About</a></li>");
...
document.write("</ul>");

And then on evere page just add a line like this one where you want to place your menu: <script type="text/javascript" src="menu.js"></script>, where menu.js is the file where you put the code above.

It'd be helpful if you don't want to use a server side language like php or asp.

Joolsd186 · #9 (**permalink**) Oct 15th, 2006, 08:54

Thanks for the tips.

I have only done very basic java, and I haven't done any php. The site is nearly finished. If there is a tutorial I would like to have a look. I'm using dreamweaver, I have good graphic skill but not an as knoledgable as you guys, in notpad. My buttons light up and all that. I'm sure the way you said is probably better, but a step at a time.

The Iframes seem to be working, Its just a element in the page. But would this hinder any of the searching on the content pages?

crewdesign · #10 (**permalink**) Oct 15th, 2006, 09:34

no do what ryan said and use php, its realy simple, just as simple as IFRAMES.
<?php include ("nav.htm"); ?> and then nav.htm would be the same as ryans. All you have to do is then stick that code on every page and whenever you want to add a link you just change nav.htm

crewdesign · #11 (**permalink**) Oct 15th, 2006, 09:40

Yes it would, search engines will not be able to read your navigation meaning they wont be able to visit all your other pages, so they will get to the homepage but will have difficulty following the links to index the rest of your pages

Joolsd186 · #12 (**permalink**) Oct 15th, 2006, 10:52

Quote:

First of all, you need to change all of the extensions from .html to .php. Then in, say, your main page, add this:

Ok this is interesting, with the menu.htm, I change this to
menu.php and would place it in my root folder? I do not have any server access, the thing is handed over to another person

Quote:

<html>
<p>Content above your navigation</p>
<?php
include $_SERVER["DOCUMENT_ROOT"]."/path/to/menu.php";
?>
<p>Content below your navigation</p>
</html>

I see the above and below <p> tags. It kind of makes sense.
My navigation page has a specific size, where would the sizeing take place. Will the role overs work in the same way? When I have produced the menu, how would I manipulate it in dream weaver? It is a dream weaver job. I would have to place the code in the code view.

I will be back later to night, to try it out, will probably have questions.

crewdesign · #13 (**permalink**) Oct 15th, 2006, 16:49

Because php is a server side language, it will include your menu file e.g: <a href="#">page</a>, before the user sees it so in effect the html code will just be <p>Page Here</p><a href="#">Page</a> and so all the styling will be done after just like anormal page

ukgeoff · #14 (**permalink**) Oct 15th, 2006, 18:48

The way to approach this sort of thing is to structure your page layout in the normal way. Then decide which part(s), this will usually be section(s) defined by a <div> element are going to be the same from page to page.

Place each of these in its own file. I name mine 'navigation.inc' and so on. These can then be called into your pages using for example php as shown below;

Code: Select all

<?php
   include ('navigation.inc');
?>

Styling associated with the contained elements and their position on the page are handled by your stylesheet(s) in the normal way.

Your pages do not, necessarily, have to have the .php extention in order for them to be processed correctly. They can have the normal extention of .html and an instruction in your servers .htaccess file ensures they are processed for any php code they may contain. This is in fact my preferred method.

The line required in your .htaccess file is shown below;

Code: Select all

AddType application/x-httpd-php .html .php4 .shtml .txt

This is telling the server to process any files with these extentions for php code.

Joolsd186 · #15 (**permalink**) Oct 15th, 2006, 19:49

Before I go down this road, is there anything which could be fixed with iframes

Please look at this thread?

http://www.htmlcodetutorial.com/help...t=2317&start=0

ukgeoff · #16 (**permalink**) Oct 15th, 2006, 21:41

You don't want to go down the iframe route, they have a different purpose altogether.

Joolsd186 · #17 (**permalink**) Oct 15th, 2006, 22:39

I need a very simple beginners tutorial.

I tried to place the sample code in the correct place. The browser alerted me of a PHP server option, so it was in use. I tried to link to a menu.psp and name my index.psp. But I could not see the menu in the page, when I previewed the page.

I just need to look ultra basic website (3 pages maybe), which uses this method. For example a basic index.psp page, with the script in use, and a ultra basic menu.psp, I am eager to see where it is placed on the page. Also knowing the file structure of the ROOT folder would be nice to know?

Unfortunanly, have only a very basic understanding of code structure, at the moment. From what you are say it would be a bad idea to use iframes, so I will not use it. Also other forums do not recomend it.

ukgeoff · #18 (**permalink**) Oct 16th, 2006, 11:23

Why don't you start with the two tutorials available through the stick at the top of the css forum.

There is one that gives you layout templates as a starting point for a web site with information on what goes where and why.

Then there is one that will show you how to build css driven menu systems.

For a good grounding in all the different (x)html tags (elements) and how to use them, try this site:
http://www.w3schools.com/tags/

Joolsd186 · #19 (**permalink**) Oct 16th, 2006, 11:46

Thank you I will look at those

Micky-D · #20 (**permalink**) Oct 16th, 2006, 11:55

Try here too... very good place.. I've been learning new stuff I didnt even realise existed in CSS... waaaaaay coool

http://www.html.net/

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Putting C# into an ASP.NET Page.	alexgeek	ASP.NET Forum	2	Feb 5th, 2008 17:16
need help putting a video on web page....	earl080688	Flash & Multimedia Forum	1	Oct 10th, 2007 04:04
Putting css in an html page.	masonbarge	Web Page Design	27	Feb 7th, 2007 22:28
putting music on a web page	Dr. J	Introduce Yourself	3	Aug 19th, 2005 20:59
Putting PHP in your web page	Jodi	PHP Forum	13	Jan 10th, 2005 20:50

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
A better way putting a menu bar, on every page