5

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

Vortex11
  • 171
  • 1
  • 3
  • 11
  • 1
    you will need PHP, SSI or Jquery Ajax calls – Lucky Chingi Oct 24 '15 at 19:39
  • or you can use a templating language and use something like middleman or jekyll to host so you can use partials. Check this link out: https://middlemanapp.com/basics/partials/ – luke Oct 24 '15 at 19:43
  • Possible duplicate of [HTML/CSS Navigation Bar on multiple pages](https://stackoverflow.com/questions/31954089/html-css-navigation-bar-on-multiple-pages) – Gaurang Tandon Feb 16 '19 at 19:35

2 Answers2

8

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.

Avinash Kadimisetty
  • 143
  • 1
  • 14
  • Ok I'll try that. I have apachne running through XAMPP. Where in my html file do I put that line? – Vortex11 Oct 24 '15 at 19:46
  • You may have to change your home.html to home.php to have php run the above code in your home page – Kelv.Gonzales Oct 24 '15 at 19:56
  • If using session, you may need to add to your navbar: if (session_status() === PHP_SESSION_NONE) { session_start(); } – JayJay123 Apr 05 '21 at 02:53
  • @Vortex11 After changing the file extension from .html to .php, place that line surrounded by php tags wherever you want the navbar to be inserted. `` You also don't need tags or anything other than what you want to include on navbar.php. – Dima Feb 20 '23 at 21:16
3

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.

Sarvagya Saxena
  • 229
  • 1
  • 9