The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Navbar repetition, How to avoid writing my Navbar in each page
GaryE
post Jul 30 2017, 03:20 PM
Post #1





Group: Members
Posts: 6
Joined: 31-August 16
Member No.: 24,769



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jul 30 2017, 05:21 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



You can define your menu once, then 'include' it using a server side language. What languages does your host support? (PHP, ASP or ?)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
GaryE
post Jul 30 2017, 06:28 PM
Post #3





Group: Members
Posts: 6
Joined: 31-August 16
Member No.: 24,769



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



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jul 30 2017, 08:53 PM
Post #4


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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
<nav id="menu">
  <?php include("{$_SERVER['DOCUMENT_ROOT']}/path/to/menu.html");?>
</nav>
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
GaryE
post Jul 31 2017, 03:53 PM
Post #5





Group: Members
Posts: 6
Joined: 31-August 16
Member No.: 24,769



Hi Charles,

I'll give this a try.

Thanks!
Gary
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
GaryE
post Aug 13 2017, 11:30 PM
Post #6





Group: Members
Posts: 6
Joined: 31-August 16
Member No.: 24,769



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:


<!-- Left Column, Navbar division -->
<?phpinclude('navbar.php');
<!-- End of Left Column, Navbar division -->


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):

<!-- Left Column, Navbar division -->
<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><!-- End of Left Column, Navbar division -->


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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 14 2017, 12:49 AM
Post #7


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 09:59 AM