グローバルナビをドロップダウンにするjQuery「FlexNav」

FlexNavは、jQueryプラグインです。ドロップダウンメニューを実装することができます。

私はグローバルナビをディスプレイの幅が小さくなったら、折りたたんでタップでドロップダウンメニューになるようにするために使いました。

以下の動画のような感じです。

ディスプレイ幅が狭くなったらグローバルナビが格納されて、ドロップダウンメニューになります。

この動画で表示しているDEMOページはこちら

 

ここからは先の動画の内容を実装するためのFlexNavの設定について解説します。

FlexNavの入手

配布元ページのURLはこちら

https://github.com/mrjasonweaver/flexnav

画面右上部あたりの緑色のボタン「Clone or download」をクリックしてから、「Download ZIP」をクリックして下さい。

「flexnav-master.zip」という名前のファイルがダウンロードできますので、パソコンの任意の場所に保存してください。

 

解凍すると以下のようなファイル構成になっています。

実際に使うのがこの中の「js」フォルダと「css」フォルダです。

 

FlexNavの設置

前述の「js」フォルダと「css」フォルダをまるごと、ドメインのルートディレクトリ(トップページと同じ階層)にアップロードして下さい。

FlexNavを稼働させるためのコーディング

headタグ区間に下記のコードを追加します。

<link href="/css/flexnav.css" media="screen, projection" rel="stylesheet" type="text/css">

 

</body> タグの前に下記のようにコードを追加します。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/jquery.flexnav.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function($){
      $(".flexnav").flexNav();
    });
</script>

 

グローバルナビのHTMLは下記の例のように組んで下さい。

<div class="menu-button">MENU</div>
<ul class="flexnav">
<li><a href="/">HOME</a></li>
<li><a href="/menu1.html">Menu1</a></li>
<li><a href="/menu2.html">Menu2</a></li>
<li><a href="/menu3.html">Menu3</a></li>
</ul>

ポイントとしてはUlタグでマークアップするのと、class属性にflexnavを指定することです。

ドロップダウンメニュー化する際にラベルを表示する場合はclass属性にmenu-buttonを指定して下さい。

このように組むことで、レスポンシブに対応したドロップダウンメニュー化したグローバルナビが実装されます。

 

このブログのトップページで紹介している嫁の白髪染めサイト「白髪染め体験記」をリニューアルするのにグローバルナビを設置しました。

このサイトはレスポンシブ対応です。スマホサイトで閲覧する際にグローバルナビをどのように可変させるか迷った挙げ句、FlexNavを使った次第です。

参考サイト

今回参考にしたウェブサイトはこちらです。

ASCII.jp:レスポンシブにも対応したドロップダウン FlexNav|こうめの“これから使える”jQueryプラグイン

私の場合はグローバルナビをディスプレイ幅によって可変させるだけでしたが、もっとカスタムしたい場合は、こちらが参考になると思います。