ウサヲブログ  HOME

ウェブ制作に関わる備忘録などを綴ります

このページの位置: HomejavaScript「jQuery「MeanMenu」でメニュー表示をコンパクトにしてみた」の記事

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

ウサヲです。

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

本当はプラグインを使わずに自力で実装したかったのですが、自分の心に負けて断念。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>)を広くした。

こんなところです。

 

 

 

コメントを残す

日本語でお願いします。「テスト投稿」のような短い文は無視されます。

TOP