レスポンシブに対応したナビゲーションリンクを設置するJavaScript「Animenu.js」の組み込み

レスポンシブに対応したナビゲーションリンクを設置するJavaScript「Animenu.js」の組み込み

Animenu.jsとは、サブメニューの開閉をするためのJavaScriptです。
装飾の知識が少し必要かもしれませんが、比較的、簡単に（グローバルメニューなどの）サブメニューを表示させることが出来ます。
CSS記述のみでサブメニューの開閉は面倒なところがありますよね。
それを解決してくれます。

Animenu.jsの本家サイト内に指定出来るオプション項目があります。
見た目に関するオプションです。
機能面においての幅広さはあまりないようですね・・・って、こんなことを言ったら怒られますよね、大変失礼致しました。
ただ、ダウンロードファイルの中にある「*.scss」というファイルを活用出来る方にとっては、更に幅が広がるようになっています。
「*.scss」は若干のプログラム要素を含んだCSSファイルのことですので、普通にコーディングされる方はには若干難しい内容かもしれません。
ただ、デフォルトで十分な機能を備えていますので、サブメニューの表示に迷われている方には是非おすすめしたいJavaScriptです。

Animenu.jsは本家サイトではなくGiHubで配布してくれています。

• Animenu.js本家
• GitHub

WEBサイトテンプレート（PHP）に組み込んだファイルをアップしていますので、ダウンロードしてお使い下さい。

phptemp_animenu_151129.zip

WEBサイトテンプレート（PHP）に組み込んだサンプルページをアップ致しました。

• Animenu組み込み済みサンプルページ

上記で配布しているWEBサイトテンプート（PHP）は、グローバルメニューの装飾において修正を加えています。
各種「 main.css 」の”グローバルメニュー”部分をご確認頂き、適宜、修正して下さい。

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

凡そ、流れ的には以下のような順番です。

1. GitHubからダウンロードしたファイル（ Animenu-master.zip ）の中の「 /js/animenu.js 」と「 /js/respond.min.js 」をjsフォルダに移動させ必要な記述を追記します。
   次にダウンロードしたファイルの中の「 /css/style.css 」をリネーム（本件ではファイル名を修正させています。）し、cssフォルダに移動させ必要な追記をします。
   配布テンプレートでは「 animenu.css 」とリネームしています。
2. htmlソースにjsファイルとcssフィアルを読み込ませ、指定のソースコードを書き込みます。
3. それぞれのファイルをアップします。

ということで、上記の内容を以下で詳細解説致します。

ダウンロードした2つのjsファイル「 /js/animenu.js 」と「 /js/respond.min.js 」、cssファイル「 /css/style.css 」（ animenu.css ）を読み込ませます。

次に以下の記述をヘッダ内に記述します。

<!--[if lt IE 9]>
<script type="text/javascript">document.createElement('nav');</script>
<script type="text/javascript" src="/js/respond.min.js"></script>
<![endif]-->

読み込ませたcssファイルと、動作を充てる箇所のcss装飾記述を修正します。
本テンプレートではグローバルナビにサブメニューを表示させたため、各種「 main.css 」のグローバルナビの箇所を修正しています。

デフォルトで設置しているテンプレート内の各種「 main.css 」では、装飾するような記述を省いています。
細かい装飾は「 style.css 」（ animenu.css ）に任せています。

書き込むべき内容は、サイトの状態によって変わりますが、当サイトでは以下の記述をグローバルナビの枠内に記述しています。

<div id="globalbg">
<div id="global">
<nav class="animenu">
<button class="animenu__toggle">
<span class="animenu__toggle__bar"></span>
<span class="animenu__toggle__bar"></span>
<span class="animenu__toggle__bar"></span>
</button>
<ul class="animenu__nav">
<li>
<a href="/">TOP</a>
<ul class="animenu__nav__child">
<li><a href="/sitemap.php">サイトマップ</a></li>
<li><a href="/privacy.php">プライバシーポリシー</a></li>
</ul>
</li>
<li>
<a href="/cate_01/">コンテンツ１</a>
<ul class="animenu__nav__child">
<li><a href="/cate_01/cate_01_01/">コンテンツ１－１</a></li>
</ul>
</li>
<li>
<a href="/cate_02/">コンテンツ２</a>
<ul class="animenu__nav__child">
<li><a href="/cate_02/cate_02_01/">コンテンツ２－１</a></li>
</ul>
</li>
<li>
<a href="/cate_03/">コンテンツ３</a>
<ul class="animenu__nav__child">
<li><a href="/cate_03/cate_03_01/">コンテンツ３－１</a></li>
</ul>
</li>
<li>
<a href="/cate_04/">コンテンツ４</a>
<ul class="animenu__nav__child">
<li><a href="/cate_04/cate_04_01/">コンテンツ４－１</a></li>
</ul>
</li>
</ul>
</nav>
<script src="/js/animenu.js" type="text/javascript"></script>
</div>
</div>

ここで重要なのは、親の<ul>と子の<ul>には以下のようにclassを記述して下さい。

<ul class="animenu__nav">

<ul class="animenu__nav__child">

そうしましたら、jsファイル、CSSファイル、htmlファイルをアップして下さい。
まずは上記までの流れのファイルをアップして頂けると、正常に表示します。

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_151020.zip 」です。
• 全ページに共通するメニューを折りたたむため、404.phpも含め、全てのファイルに各々手配する必要があります。
• 色などの装飾は各種「 main.css 」、若しくは「style.css」内の記述を修正して整えて下さい。
• 矢印や三角の装飾はデフォルトで表示されるようになっていますので、画像などの用意は必要ありません。

Animenu.jsは組み入れる箇所によっては、手間が発生するかもしれません。
また、お世辞にも情報が多いタイプのスクリプトではありませんので、触るのがしんどい方もいらっしゃるかもしれません。

ただ、ファイル内を見ればある程度の予測は出来るレベルのスクリプトですので、何か困ったことがありましたら本家サイトを見ながらそれぞれのファイルを触って頂くといいかもしれません。

今回、テンプレートに組み入れた時に色を明るモノにしようかと思いましたが、デフォルトでアップしています。
見た目だけの装飾であれば、CSSファイルを修正するだけですので、是非、色々と挑戦してください。

執筆 : 清水 隼斗