Jump to content
Killersites Forums

Navigation without cut and paste


Recommended Posts

First, sorry if this is a common question. I really don't know what I'm looking for and have, thus far, been unable to find anything that really answers it.


I'm very new to web design and have come across this issue: when designing a "navigation bar" for my web page is copying and pasting the code onto every page truly the best way to go about things? Even on a small, sample web page I was playing with it became a hassle when I changed the location of one page file to go back and edit every single web page to make sure the navigation worked.


I imagine there is some way to make this process simpler, but I just do not know what it is at all. For example, maybe there is some code (java, php?) that lets me make on, common page for all navigation and every webpage just looks to that one code to load that navigation bar.


Hopefully this question makes sense as it is driving me crazy.


Thanks for all your help.

Link to comment
Share on other sites

You can put the code into just one file and use PHP to repeat the code on lots of pages.


Open up Notepad or a text editor (not Word) and cut the code that repeats in every page completely (as much or as little as you want, without doctype, html, head or body tags) and paste it into Notepad and save as an "include" file called menu.inc. You then have only one file to edit if the menu changes.


Substitute the code you have cut out with PHP code

<?php include ("menu.inc"); ?>

in the main file and save it with .php filename extension instead of .html or .htm.

Do the same with other main pages where the menu repeats and name them with .php extension.


You can use .txt, .php, .html or .htm for the "include" file but it distinguishes it as an "include" file in your file list if you use .inc as the filename extension and it's even better if you put all "include" files in a different directory/folder.


If you use a complete page as an "include" file with .html or .htm for the filename extension the final processed page will have two doctypes, two html tags, two head sections, etc. in an unusual place which is not a good idea so only put the menu code (say the li tags if formed as a list) in the menu.inc file.


You can have different "include" files on the same main pages for header and footer and even use "includes" for the parts of the head section that repeat.


The PHP code needs to be processed by a server before the result can be seen, either by the hosting service's server just before downloading or by a server like WampServer 2 (which includes Apache) on your computer for local viewing.


SHTML works the same way but the "include" file must have .txt filename extension and the main pages have the code and the .shtml filename extension.


Check that your hosting service supports PHP or SHTML as free webspaces provided by ISPs usually do not.


Hope that helps.

Link to comment
Share on other sites

well i just don't get it, but i'll keep trying.

Anyone know an existing page where i can see this in action?


You can't see it in action, that's the whole reason for it! The PHP or SHTML code is processed by the server before you download the page, so you only see the finished result.


I can show you the code here:-


At the bottom of every page in one of my sites I have this just before the

Link to comment
Share on other sites

He can also simply take his original file, and resave it as another page name. No cut and paste. But it does not help when you have to modify all elements of the nav. So yes, includes are the way, if you don't have DreamWeaver and templates. And you don't like cut and paste. lol



Link to comment
Share on other sites

This is wonderful. One of the biggest "a ha!" moments I've had in a while. Thanks guys.


However, I've encountered a problem. My question is, if the php tag only inserts the code from the menu.inc file, and the links on web pages are different depending on their directory location, how does this solve the problem? Should I just use the full link in the menu.inc file (ex. http://www.mysite.com/about/history.php) instead of about/history.php?

Link to comment
Share on other sites

You can use a root-relative link, which means that whatever page a link is on, in however many sub-directories down from the root directory, the link will always go back to the root directory.


It does mean that you have to put your css or include files in the root directory instead of a css or includes sub-directory, but that may not matter.



Edited by Wickham
Link to comment
Share on other sites

Well, I've seemed to have found the answer. Absolute links are the way to go. But, will this cause the pages to load slower?


From my link I listed above...


"Helpful Tip #1 Always use absolute links inside your php include files (e.g. http://www.yourdomain.com/about.php).\" and no, it won't make anything slower.

Link to comment
Share on other sites

Thanks Wickham. And thanks Eric, as I found it on your link 30 sec. after I posted...ha. The codes works great. However, my dropdown menu won't work. The menu appears, but the submenus won't appear. However it works online, just not in MAMP.


Any ideas?

Edited by drew
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...