Changing navigation links in one spot?

Get Started
1

Hi,

Is there a way to write my navigation links so that I can change or add a link at some point in the future in one place… rather than having to make the change on every page…without using frames??

Thanks so much.
Deborah

2

For that it’s best to use some server-side code or a CMS.

A simple solution would be to use an include file for your navigation.

  1. Give all your HTML documents that have the nav a “.php” ending instead of “.html”
  2. Create a new document and call it, e.g. “inc-nav.php”
  3. In your inc-nav.php file, add your global nav links
  4. Remove your nav menu from the HTML document and in its place include the PHP file:

Put this into your inc-nav.php file and remove it from your HTML documents:


<ul id="nav">
    <li><a href="#">nav link</a></li>
    <li><a href="#">nav link</a></li>
    <li><a href="#">nav link</a></li>
    <li><a href="#">nav link</a></li>
</ul>

In your HTML documents, where you had the above menu, now place your PHP file instead. This will call your menu whenever a request is made to the server.


<!-- output my menu -->
<?php include('inc-nav.php'); ?>
<!-- end -->

This way you can make changes to your navigation by editing your inc-nav.php file and all your HTML documents with the PHP include will update.

3

Thank you Kohoutek! I have been wanting to learn php, and so here it is! The beginning of it, at least!

I use an image with each link, and would like to have a space between links. Can I use css with this to set a different line height?
Or could I use the following code in the php file?

<ul id=“nav”>
<li><img src=“#”></li>
<li><a href=“#”>nav link</a></li><br />
<li><img src=“#”></li>
<li><a href=“#”>nav link</a></li><br />
<li><img src=“#”></li>
<li><a href=“#”>nav link</a></li><br />
<li><img src=“#”></li>
<li><a href=“#”>nav link</a></li><br />
</ul>

Thanks again for your assistance!
Deborah

4

You could set the li height to be XX.


ul li { height: 30px; }

Using a <br /> in a list element like that would mean the code wouldn’t validate.

5

Thank you Hitmanuk2k…so I can use css with php the same way I would for html?

6

Yep. In this situation, the php is literally just ‘including’ the html code that you have in the include file and adding it back into your html code. If you viewed the page source in a browser you will not see the php code - instead you will see the navigation code that was in that separate file.

Just a note, if you are working on this site locally then you will need to have a local webserver with PHP enabled to view it correctly.

7

Hi Deborah,

yes, you can continue to write your HTML and CSS in any which way you please. The only difference is that you separate reusable code into a document of its own in order to more easily maintain your HTML documents and then reference it via PHP includes (like with the nav example).
They are still HTML documents, even with the “.php” ending.

8

The php include writes the menu code into the page, and produces the final page code which is sent to the browser. The browser than applies the css file styles to the code it received. So absolutely everything runs as before. Except it’s easier.