jQuery「MeanMenu」でメニュー表示をコンパクトにしてみた

2016-07-01 javaScript プラグイン, JavaScript 0

ウサヲです。

スマホ等、モバイルサイトにてメニューをコンパクトに表示するための技を探っておりました。

本当はプラグインを使わずに自力で実装したかったのですが、自分の心に負けて断念。jQueryでいいものを見つけてしまいました。それが「MeanMenu」です。

まずはファイルを設定

本家のサイトからダウンロードしてZIPを解凍すると、いろいろファイルが入っていますが、必要なのはこれだけだと思います。それぞれをテーマファイルの適切な場所に入れます。

jquery.meanmenu.min.js
meanmenu.min.css

ソースをに追記して初期設定

<head>に以下の２行を展開します。

<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以下で表示
});

また、ウサヲはタイトルボタンの横棒３本は、デフォルトでも決して悪くはないのですが、シンプルで悪くないのですが、タイトル属性を追加して、わかりやすくしてみました。

$('div.mean-bar a.meanmenu-reveal').attr({
    'title': 'サイトメニュー'
});
//
$('div.mean-bar a.mean-expand').attr({
    'title': 'カテゴリ一覧の開閉'
});

CSSの調整

色や幅やいろいろ、デフォルトでも決して悪くはないのですが、プチっとメンテしたくなりましたので、少々追加しました。どうしても!importantを使わなければならないところが出てくるのですが・・。

ほどこしたことは、

カラーを全般的に変更した
プルダウンの高さのサイズを狭くして、スマホでもせめてタイトルが見えるようにした
子要素を表示するときのタップエリア（<a>）を広くした。

こんなところです。