I would like to make a navigation bar that spans alot of pages but only links to a few main ones and do not want to copy and paste this bar to each page.
is there a way to make a document that contains my navigation bar and just place a link of somekind so it loads it's contents into the html file? This way I would only have to change one page whenever I want to change my navigation bar and just placing the link into all my other pages would load the new changes to everything else.
not really, but there is an easy solution. The top part is the css, and the bottom is the html coding
#navbar li { display: inline;}
#navbar li a:link, #navbar li a:visited{
text-decoration: none;
float:center;
width:15em;
padding:0.1em .5em 0.05em; 2em;
color: white;
background-color: #0000b7;
border-top: .15em solid silver;
border-left: .15em solid silver;
}
<center><ul id="navbar">
<li><a href="example.html">example</a>
<li><a href="example.html">example</a></li><br><br></ul>
By the way, you can have more than two bars, and you can make them vertical by adding (<br>)
@oriclon, thats not what he asked: read the question
make a document that contains my navigation bar and just place a link of somekind so it loads it's contents into the html file?
Only through using a server side language like PHP. You can use an <iframe>, but very bad idea leading to a world of problems.
In PHP, you have your nav bar in a file, and then on every page do include("navbar.html");. Easy as that.
Hi,
in HTML:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li class="Building-It">Working</li>
<li>About</li>
<li>Contact</li>
</ul>
In CSS:
li
(
display: inline;
margine-right: 10px;
)
li.coming-soon
(
display: none;
)
You'll definitely need more than just HTML to have a reusable page/code that you can insert into your pages. Mattster mentions PHP but other server side scripting languages have other solutions as well. For example, ASP.net uses the concept of master pages.
<html>
<head>
<script>
Jquery(function(){
jquery("#htmlfileinclude").load("b.html");
});
</script>
</head>
<body>
<div > header html
<div id="htmlfile include"></div>
</div>
</body>
</html>
My answer would have had a page with external links to all of the pages
plz read the question once again
@B1Brigman
That's pretty much what I wrote, but I added the actual code for link.
<a href="example.html">example</a>
@B1Brigman
Also, I added a css file for the nav bar so that totalwar235
could customize his site or whatever he makes
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.