Menu
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!!!!
468
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.
153
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.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
