HTMLHelp Forums > Navbar repetition

HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)

GaryE

Jul 30 2017, 03:20 PM

My website is http://bostontechnicalwriter.x10host.com/

My navbar section is exactly the same in my index page and each of my subject pages (Blogging: Electronic Products Magazine, IEEE Globalspec, etc, etc.)

Right now, if I want to add or delete one of the subject pages, I have to modify the navbar not only on the index page, but in each of the dozen or so subject pages. This is a cumbersome, error prone task. Is there any way to write only one navbar, and have it apply to the index page and all the subject pages?

BTW: Are "Navbar" and "subject Pages" the correct words?

CharlesEF

Jul 30 2017, 05:21 PM

You can define your menu once, then 'include' it using a server side language. What languages does your host support? (PHP, ASP or ?)

GaryE

Jul 30 2017, 06:28 PM

Hi Charles,

I use x10hosting, and at:

https://x10hosting.com/hosting-features

it says:

Complete Control

Want to write your own PHP scripts
or install a third-party package?
Sure!

So I guess that means I have free access to pHp

- Gary

CharlesEF

Jul 30 2017, 08:53 PM

Ok, so you have PHP to use. The first thing to know is that any page that contains PHP code needs to have a '.php' extension and must be served up thru a web server. In theory, you could change the '.php' requirement by changing your web server configuration. I stay out of that part.

Next, create your menu page (save it as 'menu.html', for example). Only include the menu parts, do not include <head> or <body> or any other parts.

Now, on each page that will have the menu you need to add something like this:

CODE

These are the pages that will need the '.php' extension. The <nav> is valid for HTML5 pages. If you are using anything else then use a <div> instead.

That is the basics of what you need to do. If you need to work on the position or something else then you need to use CSS.

GaryE

Jul 31 2017, 03:53 PM

Hi Charles,

I'll give this a try.

Thanks!
Gary

GaryE

Aug 13 2017, 11:30 PM

Hi Charles,

Your idea worked. I tried it out on a new free host, the modified website is:
https://exper17.000webhostapp.com/

I Inserted this command into each page:


<?phpinclude('navbar.php');


as for navbar.php itself
(after I took out most of the menu choices to save space in this note, they are all about the same):


<div id="left_col">

<table style= "width: 100%" cellspacing="8" cellpadding="2">

<tr style="background-color: #ffcc33;">
<td style="width: 100%"><a href="index.php">Home</a></td>
</tr>

<tr style="background-color: #ffcc33;">
<td style="width: 100%"><a href="softwarewriter.php">Software Articles</a></td>
</tr>

<tr style="background-color: #ffcc33;">
<td style="width: 100%"><a href="scopejunction.php">Scope Junction</a></td>
</tr>

<tr style="background-color: #ffcc33;">
<td style="width: 100%"><a href="gmvolt.php">GM Volt</a></td>
</tr>
</table>
</div>

Now, I only have to modify "navbar" in one place only when I want to change my choices. So, thanks again for your help!

Regards,
Gary

CharlesEF

Aug 14 2017, 12:49 AM

Great, glad it worked out for you. One thing I did see that needs fixing, maybe if was just a copy and paste error. This line of code:

CODE

<?phpinclude('navbar.php');

Should be:

CODE

<?php include('navbar.php');?>

In PHP you need '<?php' to start PHP code and '?>' to end PHP code.

Also you could expand this method to include your header or footer sections (if you use either).

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.