#はじめに
###htmlでヘッダーやフッターを共通パーツ化する方法
こうしたことは最近ではVue.jsなどでラクに実現できてしまいますが、今回はプログラマじゃなくても保守できるように。。ということが推奨されたため、できるだけ簡素な方法で実装しました。
そして、ヘッダー部分で必要なjsが何故か読み込めず相当ハマってしまったのでその解決法もあわせて記述します。
#手順
以下の方の記事が一番わかりやすく実行しやすかったです。
https://qiita.com/sho11hei12-1998/items/e9c81db697fb5d51e2af
切り分けた先の共通パーツでは、idをあらためて指定しなくてもindex.html内で指定しておけばいい感じに読み込んでくれるようです。
header内のmenuWrap部分をクリックすることで、メニュー（panel内の部分）を開閉できるようにしたい、というのが主に実現したいことです。
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" media="all" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script src="js/script.js"></script>
</head>
<html>
<body>
<!-- header.html -->
<header id="header"></header>
<div>
<h1>中身（コンテンツ）</h1>
</div>
<!-- footer.html 今回は使いません -->
<footer id="footer"></footer>
</body>
</html>
<!-- header共通ファイル -->
<div id="headerWrap">
<h1><a href="index.html"><img src="images/logo.png" width="284" height="160" alt="logo"></a></h1>
<nav id="mainnav">
<p id="menuWrap">
<a id="menu"><span id="menuBtn"></span></a>
</p>
<div class="panel">
<ul>
<li><to><a href="index.html">トップページ"</a></to></li>
<li><to><a href="about-us.html">ご挨拶</a></to></li>
<li><to><a href="archives.html">業績</a></to></li>
<li><to><a href="contact.html">お問い合わせ</a></to></li>
</ul>
</div>
</nav>
</div>
.panel {
width: 100%;
display: none;
overflow: hidden;
position: relative;
left: 0;
top: 0;
z-index: 100;
}
#menuBtn {
display: block;
position: absolute;
top: 60%;
left: 50%;
width: 18px;
height: 2px;
margin: -1px 0 0 -7px;
background: #000;
transition: .2s;
}
#menuBtn:before, #menuBtn:after {
display: block;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 18px;
height: 2px;
background: #000;
transition: .3s;
}
a#menu .close {
background: transparent;
}
a#menu .close:before, a#menu .close:after{
margin-top: 0;
}
a#menu .close:before {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
a#menu .close:after {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
$(function(){
// html 共通部分読み込み
$("#header").load("header.html");
$("#footer").load("footer.html");
// 中略
$('#menuWrap').on('click', function() {
$(this).next().slideToggle();
$('#menuBtn').toggleClass('close');
},
function() {
$(this).next().slideToggle();
$('#menuBtn').removeClass('close');
});
});
上記では概ね必要最低限のソースのみ記述していますが、画面右側に開閉できるハンバーガーメニューのついたヘッダーを生成しました。いや、そのつもりでした。
#さて、パーツ切り分けはできたけど
###jsが効かなくなってしまった
ここまで書いたところでメニューの開閉が出来なくなってしまいました。あらやだ！
headerファイルを切り分ける前は正常にscript.jsを読み込み動いており、パーツを切り分けて$("#header").load("header.html");を追記した部分も正常に動いてくれるので、js全体を読み込んでいないわけではなさそう。
作業途中でjQueryのバージョンを変えた(1.8.0->1.9.1)こともあり、廃止メソッドのせいかな？と思い色々試してみるも効果なし。
あと何故かブラウザのデバッグにも引っかからず(理由はわかりません)
#解決
https://webdesign-abc.com/tech/easy-edit/
大元のhtmlで使用しているjsの機能を使いたい場合は、共通パーツ内の最初に、必要なjsファイルを記述する必要があります。
大元のhtmlで読み込んでいるjsはheaderでは読み込んでくれないようです。
cssは何もしなくても正常に読み込んでくれるのでjsもそんなかんじとうっかり思い込んでました……。
###jsを直接記述する
<!DOCTYPE HTML>
<!-- header共通ファイル -->
<script>
$('#menuWrap').on('click', function() {
$(this).next().slideToggle();
$('#menuBtn').toggleClass('close');
},
function() {
$(this).next().slideToggle();
$('#menuBtn').removeClass('close');
});
</script>
<div id="headerWrap">
<h1><a href="index.html"><img src="images/logo.png" width="284" height="160" alt="logo"></a></h1>
<nav id="mainnav">
<p id="menuWrap"><a id="menu"><span id="menuBtn"></span></a></p>
<div class="panel">
<ul>
<li><to><a href="index.html"><img src="images/toppage.png" width="130" alt="トップページ"></a></to></li>
<li><to><a href="about-us.html"><img src="images/introduce.png" width="130" alt="楽団紹介"></a></to></li>
<li><to><a href="archives.html"><img src="images/archives.png" width="130" alt="過去の演奏会"></a></to></li>
<li><to><a href="contact.html"><img src="images/inquiry.png" width="130" alt="お問い合わせ"></a></to></li>
</ul>
</div>
</nav>
</div>
###開閉できた！
見やすくするため画像にグレー背景をつけています
#所感
今回のようにファイル切り分けてjs読み込むとか、DOM操作して生み出したパーツにjsを当てるときの特殊なお作法とか、js(およびjQuery)はわりと引っかかりやすいポイントありますね……。
慣れなのかな。