CODEWITHSUNDEEP
htmlweb
Vortex11
Vortex11

Reputation: 171

Include HTML Navigation Bar in All Pages

I have a navigation bar that I want to have in a seperate html file and then use in all my other pages. I feel like it will make the code look neater and more organized. However, I'm having some trouble. I started by trying to fix the home page and this is what I have:

<!DOCTYPE html>
<html>
<head>
  <title>Home Page</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="import" href="navigation.html">


  </head>

<body>



<br><br>
<div class="zoom pic">
 <center> <img src="images/technology.png" alt="portrait"> <center>
</div>


</body>

</html>

This is the navigation bar in a seperate html file, but in the same exact directory as all my other html files.

This is the navigation.html file if it helps anything:

<!DOCTYPE html>
<html>
<head>
  <title>Home Page</title>
  <link rel="stylesheet" type="text/css" href="style.css"> 

</head>



<center> <b>World Congress CS-IT Conferences 2016</center>
<div id="horizontalmenu">
  <ul>
   <li><a href="index.html" title="Home Page">Home<br/></a></li>
   <ul> <li><a href="information.html">General Information</a> <ul> 
        <li><a href="about.html">About</a></li> 
        <li><a href="fee.html"> Conference Fee</a></li> 
        <li><a href="hotel.html">Hotel</a></li> </ul>
   <li><a href="keynote.html" title="Speakers">Keynote Speakers<br/></a></li>
   <li><a href="call.html" title="Call for Papers">Call for Papers<br/></a></li>
   <li><a href="dates.html" title="Important Dates">Important Dates<br/></a></li>
   <li><a href="major.html" title="Major Areas">Major Areas<br/></a></li>
   <li><a href="paper.html" title="Submit a Paper">Paper Submission<br/></a></li>
   <li><a href="reviewer.html" title="Login">Login<br/></a></li>
   <li><a href="register.html" title="Register online">Registration<br/></a></li>
   <li><a href="conference.html" title="Conference">Conference Program<br/></a></li>
   <li><a href="guidelines.html" title="Guidelines">Guidelines<br/></a></li>
   <li><a href="comments.html" title="Comments and Feedback">Comments<br/></a></li>
  </ul>
</nav></b>

My current issue is that I'm not seeing the navigation bar now in my home page! Any ideas on how tackle this? Any help is greatly appreciated!!!!

Upvotes: 5

Views: 31795

Answers (2)

Sarvagya Saxena
Sarvagya Saxena

Reputation: 229

This can be done using jQuery also. here, u write nagivation bars html in navigationBar.html and in whichever page u want to include it in, create an empty element with id #nav and in script replace the contents of it.

$.get("navigationBar.html", function(data){
    $("#nav").replaceWith(data);
});

this can also be done using html5 imports tag http://blog.teamtreehouse.com/introduction-html-imports

check this link if u want.

Upvotes: 3

Avinash Kadimisetty
Avinash Kadimisetty

Reputation: 143

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.

Upvotes: 8

Related Questions