1

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.

6
Contributors
10
Replies
51
Views
2 Years
Discussion Span
Last Post by oriclon
1

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>
1

By the way, you can have more than two bars, and you can make them vertical by adding (<br>)

0

@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.

0

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;
 )
0

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.

0
<html> 
  <head> 

    <script> 
    Jquery(function(){
      jquery("#htmlfileinclude").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 

      <div > header html 
     <div id="htmlfile include"></div>
     </div>
  </body> 
</html>
0

@B1Brigman
That's pretty much what I wrote, but I added the actual code for link.
<a href="example.html">example</a>

1

@B1Brigman
Also, I added a css file for the nav bar so that totalwar235
could customize his site or whatever he makes

Edited by oriclon: repeat

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.