Multiple webpages with common title and navigation bars
Using just HTML and/or CSS, no, you cannot do this, as this requirement is outside their specifications (read 'purpose').
There are two approaches that remain:
If you are using a server side language (e.g. PHP) you can leverage off the libraries syntax for including content from other files inline (
include()
) in the case of PHP, or Server Side IncludesYou can use javascript, or a library like jQuery to fetch the output (content) of other pages, and inject them into your page at a specified place. This can be done as easily as using jQuery's
load()
method as seen here
Single navigation bar across website?
JQuery
As JQuery is JS-based, you might be allowed to use it. You could then add a navigation div into each page's template:
<div id="navigation"></div>
and include a script on each page that executes the following JQuery-code:
$(function() {
$("#navigation").load("navigation.html");
});
Pure JavaScript
Alternatively, if you cannot use JQuery whatsoever, you could use plain JavaScript, which is more lightweight but not as clean.
Wherever you want to include the navigation, simply include a script:
<script src="nav.js"></script>
Which holds your navigation based on document.write
:
document.write('<div>\
... your navigation content ...\
</div>\
');
Include HTML Navigation Bar in All Pages
PHP helps you do this.
Keep your navigation bar code in navbar.php file and include this file in a page you want the navigation bar. For example if you want to include the navigation bar in index.php file, you can just include it like this.
include_once("navbar.php");
You need a server to run php code. You cannot directly include a HTML file in an other HTML file.
How to reuse a navigation bar across different .html pages with CSS and JS?
Honestly, there's not an easy way to do this with vanilla Javascript. You basically have to either create the navbar using JS, which can then be imported to each page, or you have to copy and paste it.
The industry solution to this problem is to use React, Vue or Angular, all technologies which allow you to create and reuse JSX 'components'. In other words, in React, you could create a navbar component, which could easily be imported in any 'page' of the website. But with vanilla HTML/Javascript, it's really not an option.
How can I make my navi-bar the same across my html?
I figured it out myself, you can use a JavaScript file and use document.write then put this where you want it to go:
<script type="text/javascript" src="/js/sidebar.js"/>
Here's my js file:
document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");
If you want to use both double quotes and single quotes inside the line, be careful with that, and I think that the < and > signs have to be in double quotes. Here's my full code:
----/js/sidebar.js----
document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");
document.write("<div id='sidebar'>");
if (page==1) { var p=" style='text-decoration: underline;'" } else { var p=" style='text-decoration: normal;'" }
if (page==2) { var pp=" style='text-decoration: underline;'" } else { var pp=" style='text-decoration: normal;'" }
if (page==3) { var ppp=" style='text-decoration: underline;'" } else { var ppp=" style='text-decoration: normal;'" }
if (page==4) { var pppp=" style='text-decoration: underline;'" } else { var pppp=" style='text-decoration: normal;'" }
if (page==5) { var ppppp=" style='text-decoration: underline;'" } else { var ppppp=" style='text-decoration: normal;'" }
document.write("<p><"+'a href="http://brandonc.handcraft.com/"'+p+">Home</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/about"'+pp+">About The Author</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/sevenmages"'+ppp+">The Seven Mages</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/comment"'+pppp+">Leave A Comment</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/calender"'+ppppp+">Calender</a></p>");
document.write("</div>");
----In place where you want code to go----
<script>var page=5</script>
<script type="text/javascript" src="/js/sidebar.js"/>
Probably not the most efficient, and I'd defiantly recommend using PHP like in the other answers, but this works for me and doesn't need a .php after every url.
Related Topics
Overlay on HTML5 Fullscreen Video
Prevent Tabstop on a Element (Anchor Link) in HTML
How to Move Placeholder to Top on Focus and While Typing
How to Change an Image on Click Using CSS Alone
CSS Selector for Empty or Whitespace
Ios7 Font Size Change When Create Nsattributedstring from HTML
Style and Script Tags in HTML Body... Why Not
Is There a Reason to Use a Instead of A:Link or A:Visited in My Stylesheet
How to Set Placeholder Value Using CSS
"Height=100%" Is Not Working in HTML When Using <!Doctype>
Failed to Load Resource, Plugin Handled Load on iOS
CSS White-Space: Pre Not Working as Expected
Floating Elements Are Outside of Containing Blocks
Ruby Slim - How to Define an Element's Class with a Rails Helper or Variable
Twitter Bootstrap Select Arrow Missing
Floating Divs Left, Make All Divs Height Equal the Tallest Div in It's Row