Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Navbar repetition

Posted by: 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?

Posted by: 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 ?)

Posted by: 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

Posted by: 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.

Posted by: GaryE Jul 31 2017, 03:53 PM

Hi Charles,

I'll give this a try.

Thanks!
Gary

Posted by: 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

Posted by: 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).