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

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

コラム

今回はjQueryというわけではないJavaScriptの「Animenu.js」の組み込みの紹介です。
CSSとJavaScriptを組み込み、(今回の例で言えば)グローバルメニューにサブメニューをマウスを乗せることで表示させるようにします。
第二階層目のリンクをグローバルメニューで表示させたい時に使えます。
また、レスポンシブ対応ですので、スマホで表示する時の表示にも備えています。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

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

Animenu.jsイメージ
Animenu.jsとは?
Animenu.jsとはサブメニューのリンクを開いたり閉じたり表示するJavaScriptです

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

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

Animenu.jsの本家サイトと配布

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

ダウンロードと組み込みサンプル
Animenu.js組み込み済みファイルのダウンロード

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

phptemp_animenu_151129.zip
組み込み済みサンプル

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

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

元になるWEBサイトテンプレート(PHP)について

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

組み込み手順

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

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

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

jsファイルの移行とcssファイルの移行

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

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

htmlソースに指定のソース記述

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

<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/">コンテンツ1</a>
<ul class="animenu__nav__child">
<li><a href="/cate_01/cate_01_01/">コンテンツ1-1</a></li>
</ul>
</li>
<li>
<a href="/cate_02/">コンテンツ2</a>
<ul class="animenu__nav__child">
<li><a href="/cate_02/cate_02_01/">コンテンツ2-1</a></li>
</ul>
</li>
<li>
<a href="/cate_03/">コンテンツ3</a>
<ul class="animenu__nav__child">
<li><a href="/cate_03/cate_03_01/">コンテンツ3-1</a></li>
</ul>
</li>
<li>
<a href="/cate_04/">コンテンツ4</a>
<ul class="animenu__nav__child">
<li><a href="/cate_04/cate_04_01/">コンテンツ4-1</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ファイルを修正するだけですので、是非、色々と挑戦してください。

執筆 : 清水 隼斗

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP