0

I have a website that consists of 6 .html pages. The main page is (index.html), There are some <li> elements in the navigation menu that import the content from another .html file, for example the contact us page.

When <li><a>Contact</a></li> is clicked the navigation menu (header) and footer are remain without any change, just the content between them is changed with the content of "contact.html". It's working well if I visited the homepage then click "Contact" from the navigation menu, but what if I want to visit this page directly?

For example if I visit www.mywebsite.com/contact I find the header, contact page content and the footer. Because if I visit www.mywebsite.com/contact.html I will just find the html content without any styling or anything. So is this possible or I will need to add the header and footer code for all the pages?

Stephen Rauch
  • 47,830
  • 31
  • 106
  • 135
Jim
  • 37
  • 2
  • 7
  • Very simple using server side includes within whatever programming language you have available. Or create a single page app with javascript. Lots of easy to use frameworks for both available – charlietfl Oct 15 '17 at 15:47
  • There are great Single Page Application (SPA) frameworks to handle this. If you really want to rig something up yourself, you could basically redirect any traffic to any of the individual pages to your index page with a hash value telling that page what to display. – Nick Oct 15 '17 at 15:52
  • @snapjs , I was thinking of doing the second idea , but I don't know how to do that ? – Jim Oct 15 '17 at 16:03

1 Answers1

0

Here's an idea to get you started on a DIY solution.

  1. On each individual page, check to see if there's a query parameter called "router." Here's a good way to check for that.
  2. If there is no such query parameter, replace the window location to the index page, but with the appropriate hash (e.g., index.html#contact)
  3. Within the index.html page, use the hash to pull in the appropriate page, but make sure when you're loading via ajax you load with the router parameter (i.e., make sure to load the contact page URL as contact.html?router=true).
Nick
  • 16,066
  • 3
  • 16
  • 32