レスポンシブ対応メニュー用jQueryプラグイン「meanmenu.js」

レスポンシブ対応メニュー用jQueryプラグイン「meanmenu.js」

ウィンドウサイズが小さい場合に、自動的にナビゲーションを変形させてくれるjQueryプラグイン「meanmenu.js」のご紹介です。

PCやタブレットで表示する際は、ナビゲーションを横並びに配置しておき、ウィンドウサイズがある一定のサイズを基準にアコーディオン形式のナビゲーションに変形させることができます。

 

 meanmenu.js

 

デモサンプル

 

▼サンプルとして多少カスタマイズしたサンプルをご用意しました。

デモサンプル(カスタマイズ)

 

 

【使い方】

1.meanmenu.jsをダウンロードします。

meanthemesよりデータ一式をダウンロードします。

 

2.jQuery本体とJavaScriptを読み込む

 ※IE8 ではもともと Media Queries が効かないので「css3-mediaqueries.js 」を読み込んで対処します。

 

3.CSSを読み込む

 

4.meanmenu();を実行する

<header>要素の中の<nav>要素に対して.meanmenu();を実行します。

 

5.表示用CSSを記述

 

6.HTMLを記述

サンプルとして下記のようなHTMLを記述しておきます。

 使い方は簡単ですが、そのまま流用する場合ディスプレイサイズが大きいときに、メインとなるナビゲーションの下層ナビが表示されないので表示したい場合は修正が必要になります。


 

タイトルとURLをコピーしました