jQuery「MeanMenu」でメニュー表示をコンパクトにしてみた
2016-07-01 javaScript プラグイン, JavaScript 0

ウサヲです。
スマホ等、モバイルサイトにてメニューをコンパクトに表示するための技を探っておりました。
本当はプラグインを使わずに自力で実装したかったのですが、自分の心に負けて断念。jQueryでいいものを見つけてしまいました。それが「MeanMenu」です。
まずはファイルを設定
本家のサイトからダウンロードしてZIPを解凍すると、いろいろファイルが入っていますが、必要なのはこれだけだと思います。それぞれをテーマファイルの適切な場所に入れます。
- jquery.meanmenu.min.js
- meanmenu.min.css
ソースをに追記して初期設定
<head>
に以下の2行を展開します。
<link rel="stylesheet" href="xxxx/css/meanmenu.css" /> <script src="xxxx/js/jquery.meanmenu.min.js"></script>
※展開する場所やパスは環境に合わせます。また、この他にhtmlでメニューの一覧を記述しました。
JavaScriptに記述
基本的に、以下のjScriptだけで実行できます。
//meanmenu実行 $('nav').meanmenu({ });
でもウサヲは、デフォルトでも決して悪くはないのですが、プチ気に入らないところもあったので、以下のようにオプションをいじくりました。他にもオプションがあるのですが、本家サイトのオプション(英語)をご参照ください。
//meanmenu メニューボタンの調整 $('nav').meanmenu({ meanMenuClose: "×", // メニューボタンが開いた状態のクローズボタン デフォルトは"x" meanMenuCloseSize: "32px", // 上記ボタンのフォントサイズ デフォルトは meanMenuOpen: "<span /><span /><span />", // 通常表示されているオープンボタン デフォルトもコレ cssで調整 meanRevealPosition: "left", // 表示位置 デフォルトは meanRevealPositionDistance: "16px", // 表示位置を順にした位置変更 デフォルトは0 meanScreenWidth: "768", // 表示のブレイクポイント デフォルトは480以下で表示 });
また、ウサヲはタイトルボタンの横棒3本は、デフォルトでも決して悪くはないのですが、シンプルで悪くないのですが、タイトル属性を追加して、わかりやすくしてみました。
$('div.mean-bar a.meanmenu-reveal').attr({ 'title': 'サイトメニュー' }); // $('div.mean-bar a.mean-expand').attr({ 'title': 'カテゴリ一覧の開閉' });
CSSの調整
色や幅やいろいろ、デフォルトでも決して悪くはないのですが、プチっとメンテしたくなりましたので、少々追加しました。どうしても!importantを使わなければならないところが出てくるのですが・・。
ほどこしたことは、
- カラーを全般的に変更した
- プルダウンの高さのサイズを狭くして、スマホでもせめてタイトルが見えるようにした
- 子要素を表示するときのタップエリア(<a>)を広くした。
こんなところです。