JSでナビゲーションを表示

HTML

ナビゲーションを表示したい場所にマークアップ

<section id="inc-header"></section>

<script>header('./');</script>

読み込まれるファイル（header.html）

<header id="site-header">
	<div id="site-logo"> ロゴ</div>
	<nav id="global-nav">
		<ul>
			<li><a href="{$root}">HOME</a></li>
			<li><a href="{$root}menu1/">menu1</a></li>
			<li><a href="{$root}menu2/">menu2</a></li>
		</ul>
	</nav>
</header>

Jquery(1.12.4での場合)

function header(rootDir) {
	$.ajax({
		url: rootDir + "header.html",
		cache: false,
		async: false,
		dataType: 'html',
		success: function (html) {
			html = html.replace(/\{\$root\}/g, rootDir);
			$("#inc-header").html(html);
		}
	});
}