1
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#contact">Tutorial</a></li>
<li><a href="#contact">Blog</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>

I have the above nav bar in my website, which includes couple pages. The thing is, whenever I create new page, I manually have to enter all nav bar stuff over and over again.

So was wondering, if there are any sort of template I can wrap my nav, and use that template for other pages, so I just need to change the one template file, instead of changing whole stuff in each pages.

I found sth called template tag, but not sure how I'm suppose to use it.

Toshihiro M Sakurai
  • 171
  • 2
  • 15
  • You cannot do this with basic HTML. You will have to use either PHP, Javascript or use a static site generator like Middleman and use partials. Check out this link ([https://middlemanapp.com/basics/partials/]) and let me know if you have any questions about using it. It is pretty easy to get up and running. Google Middleman tutorial and that should get you going as well. – luke Oct 28 '15 at 03:49

2 Answers2

4

You can do this using jQuery. Create separate page for NAV. Ex: header.html.

Then include your header nav in header.html page. Then create and 'id' in the page you want to get the menu. Here I am using a div that id called main-menu. Then using jQuery you can add your html menu to relevant page. 

$("#main-menu").load("header.html");

Here is a code snippet. Use loading script always below the jQuery.

// Get nav to the page
$('#main-menu').load('header.html');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="main-menu"></div>
WP Learner
  • 730
  • 11
  • 28
2

Quick and easy way would be to save that code as something like header.html and then inlcude it in all the other pages. Which can be done using jQuery or JavaScript, see this SO question for how.

Community
  • 1
  • 1
Keeghan McGarry
  • 235
  • 2
  • 15