Navigation menu on every page (no php, please)

[ComputerGuy]

Thanks to help from this forum, I have a navigation menu. What I want now is to have that navbar on every html page without of course having to copy and paste the contents into the page. I basically have this:

Sample

Then I have some ul and li elements with the links to the pages. I have been searching online, but I’m getting too many different answers. I want this all done via HTML and/or CSS, if possible. I’m not an expert in either, but I can follow instructions.

My plan is that one page is the navbar, with only the bar in the tag. Then of course, I’ll point to that navbar on every page, where I’ll then also have my content.

I just need to know how to link the navbar to every page. I can give more details, I was trying to be brief.

[Beverleyh]

The most basic HTML and CSS approach I think would be an iframe – navigation in the main page (targeting the iframe) and then have individual content/pages displayed through the (named) iframe.

This isn’t ideal though because without the use of JavaScript, your homepage would be the only bookmarkable page. Iframes can also confuse visitors because they give the appearance of messing with the browser’s ‘back’ function.

I wouldn’t use it at all if I could help it, and if I absolutely had to, I would only suggest using it on the most simple of websites (5 or so pages).

If you want to research more and see if this works for you, try Googling something like “named iframes and linking to them with the target attribute”.

If you need further help, try putting together a simple CodePen showing what you’ve tried and what problems you’re having. Also clearly explain what the disirable outcome is versus what is actually happening so that we can offer suggestions for a fix.

[ComputerGuy]

Thanks, I saw an example for the iframe, and it looked horrible, or maybe that was just me doing something wrong. JavaScript is an option, and I may be using the incorrect terms, but I want this all client side, not server side, that’s why I didn’t want to use php. I’m using a combination of PowerShell for the reports, and HTML/CSS to make everything look nice. I’ll get something in CodePen, now of course, other work duties have taken over.

[Beverleyh]

Yes – Default iframes can look horrible, but you can remove the border and/or scrollbar to give them a much nicer, integrated appearance.

[ComputerGuy]

I posted what the basic structure is at CodePen. A lot of the classes and everything are off, just because I’ve changed a lot, but that’s the menu that I want on every page. I’m willing to try it with JavaScript. I’m going to add a lot of content to it, so just put up a bar bones preview.

That’s the actual menu that I want to have on every page, since every page will have a report attached to it.

Thank you for any help.

https://codepen.io/TheComputerGuy/pen/PyEvPR

[Beverleyh]

Sorry – The menu markup can’t go in the head element. It should go in the body element, along with the iframe through which to view other pages/content.

You might want to research more about the basic structure of a web page before you look into JavaScript.

You also should consider that if a navigation was inserted into a page via JavaScript, and JavaScript was turned off on the client device/stuck behind a firewall/blocked by corporate policies/failed to load for whatever reason, the site would be pretty unusable.

I would still say to use server-side solutions like PHP, which can be made to run in standard .html/.htm pages IF the server is setup to parse PHP in .html/.htm. You can do this through .htaccess. Just something else to consider.

[ComputerGuy]

Thank you for all your help.

[Author]

Posts