レスポンシブメニューを実装出来るjQueryプラグイン「MeanMenu」をワードプレスに導入・カスタマイズした話

このたび、スマホ環境でヘッダーにメニューを表示させるため「MeanMenu」というjQueryプラグインを導入しました。参考になるかは分かりませんが、カスタマイズして実装するまでを書いてみたいと思います!

バージョンはワードプレス本体4.7、MeanMenu2.0.8で動作確認できておりますが、当ブログにおいては既に使用をやめ、また当ブログでは動かなくなってしまったのでデモページの公開も取りやめております。

→動いているのが確認できた(バージョンはワードプレス本体4.8.0、MeanMenu2.0.8)ため再度デモページへのリンクを張っておきます(2017年8月5日)

*2015年2月17日に公開した記事ですが、2017年8月5日に編集し直したうえで再公開しました。

元々レスポンシブメニューはあったけど……

当ブログで使用中のワードプレステーマには「画面幅○○px以下専用メニュー」がはじめから用意されていました。(画面幅によってメニューA・Bの表示/非表示がdisplayの値によって切り替わる)

元々あったレスポンシブメニュー

ブログタイトル下にあるのがそのメニュー。見た目的には普通なのですが、個人的に気になる問題がひとつありました。

中身が見えてしまうメニュー

メニューの中身が隠れてない!

メニューボタンを押して初めて中身が見える時もちゃんとあったのですが、最初から丸見えになってしまうことが結構な頻度でありました。これだと余計なスクロールを訪問者は強いられてしまいます。マズイ……

メニューを消去

そこでメニューを外しました(!)

普通ならスマホ環境でも問題がないメニューを実装して対応するところですが、ページ下部にはカテゴリ一覧やお問い合わせページへのリンクがありましたし、なによりメニュー作成の知識がなかったのでこのような判断に。

しかし、モバイル端末でのアクセスが増えている現状を考えると、やっぱりメニューがあった方が親切な気がします。今時のレスポンシブデザインのサイトやスマホサイトはヘッダーにメニューを置いているのが普通ですしね。

そんなわけで簡単にレスポンシブメニューを実装出来る方法をググってみたところ、「MeanMenu」という良さげなjQueryプラグインを発見。これなら僕でも出来そうだということで導入してみることにしました。

MeanMenuを使ってメニューを表示させる

MeanMenuの詳細やデモサイトは以下のリンクからどうぞ。

レスポンシブメニュー実装の際に必要なJavaScriptファイルやCSSファイルは、ひとつめのリンク先からダウンロードすることが出来ます。ダウンロードしたら自分のサーバーの適切な場所へアップロードしましょう。

そして、それらのファイルを使用するために次のような感じのコードを記述します。

まず<head>内にmeanmenu.cssを。

<link rel="stylesheet" type="text/css" href="meanmenu.cssへのパス" />

続いて</body>の直前などにjquery.meanmenu.jsを。もちろん、jQuery本体は読み込み済という前提です。

<script src="jquery.meanmenu.jsへのパス"></script>
<script>
jQuery(document).ready(function () {
    jQuery('#meanmenu nav').meanmenu();
});
</script>

以上のコードを記述した上で、メニューを表示させるためのHTMLコードをheader.phpに記述しました。

<div id="meanmenu">
<nav>
<ul>
<li><a href="#">カテゴリ一覧</a>
<ul>
<li><a href="(省略)">Webサービス</a></li>
<li><a href="(省略)">サッカー</a></li>
<li><a href="(省略)">ブログ運営</a></li>
<li><a href="(省略)">映像紹介</a></li>
<li><a href="(省略)">暮らし</a></li>
<li><a href="(省略)">読書メモ</a></li>
<li><a href="(省略)">雑記</a></li>
<li><a href="(省略)">食べもの</a></li>
</ul>
</li>
<li><a href="(省略)">このブログについて</a></li>
<li><a href="(省略)">お問い合わせ</a></li>
</ul>
</nav>
</div>

ここまでの作業の結果、480px以下(MeanMenuデフォルト設定)のウインドウサイズでは次のようなメニューが表示されるようになりました。

meanmenu導入直後

次の画像はメニューを開いてカテゴリ一覧を展開させたところ。

meanmenu導入後にメニューを展開したところ

JavaScriptファイルやCSSファイルを読み込んでスクリプトを実行する。そんな簡単な作業でこんなメニューを作れるのがMeanMenuなのです。

メニューをカスタマイズする

折り畳みメニューを表示させることには成功しましたが、その表示位置や色など直したいところも色々あります。そこで今回は、スクリプトを実行するコードやCSSファイルに手を加えることでそれらを実現したいと思います。

</body>の直前に記述したコードをいじる

手を加えるのは先ほども紹介したこちらのコード。

<script>
jQuery(document).ready(function () {
    jQuery('#meanmenu nav').meanmenu();
});
</script>

GitHubのMeanMenuのページを参考に手を加えてみました。

<script>
jQuery(document).ready(function () {
    jQuery('#meanmenu nav').meanmenu({
    meanMenuContainer: "#meanmenu", // メニューを表示させる位置
    meanMenuClose: "CLOSE▲", // 開いたメニューを閉じる際のボタン
    meanMenuCloseSize: "16px", // そのボタンのフォントサイズ
    meanMenuOpen: "MENU▼", // メニューを開く際のボタン
    meanRevealPosition: "center", // そのボタンの表示位置
    meanScreenWidth: "991", // 折り畳みメニューを表示させるウィンドウサイズ
});
});
</script>

このオプション設定でメニューの表示位置を変えたり(デフォルトはbodyだったため画面一番上に表示されていた)、メニューの開閉ボタンとしてテキストを設定したりしました。

また、991という数字は当ブログの仕様(991px以下で2カラムから1カラムへ変わる)に合わせたものです。この値を境に2カラム時のメニューが非表示となり、一方でMeanMenuメニューが表示されるようにしています。

MeanMenuメニューの表示/非表示はCSSで設定しており、これは後ほど紹介したいと思います。

その他設定可能なオプション項目については、GitHubのMeanMenuのページで解説されているのでチェックしてみてください。

それでは現時点でのメニューの表示を確かめてみましょう。

meanmenuのJavaScriptを調節した後のメニュー

メニューを閉じるためのテキストの位置がおかしいですね。あとメニューの上下に余白も欲しいです。こういったところをCSSによって設定していきたいと思います。

MeanMenuのCSSをいじる

meanmenu.cssの前に、まず#meanmenuについて次のように記述しました。

#meanmenu {
    display:none; /* メニュー非表示 */
}
/* ウインドウサイズが991px以下のときメニュー表示 */
@media only screen and (max-width : 991px) {
#meanmenu {
    display:block;
}
}

これが先ほど触れたMeanMenuメニューの表示/非表示を切り替えるための記述です。パソコンからご覧になっている方はウインドウの幅を広げたり狭くしたりしてみてください。どういうことかよく分かると思います。

続いてmeanmenu.cssですが、追記・削除箇所をまとめてみました(投稿日時点)。

/* メニューバー */
.mean-container .mean-bar{
    background:#eaeded; /* デフォルトは#0c1923 */
    margin:10px 0 22px; /* メニューの上下に余白が欲しかったため追記 */
    /* padding:4px 0;
       min-height:42px; 削除 */
}

/* メニューの開閉ボタン */
.mean-container a.meanmenu-reveal{
    padding: 8px 0px 6px; /* デフォルトは13px 13px 11px */
    color: #777f83; /* デフォルトは#fff */
    letter-spacing: 3px; /* 開閉テキストの間隔調整のため追記 */
    /* width: 22px;
    height: 22px;
    position: absolute; 
    top: 0;
    right: 0;
    cursor: pointer;
    text-indent: -9999em; 
    line-height: 22px;
    font-size: 1px; 
    font-family: Arial,Helvetica,sans-serif; 削除 */
}

/* メニューを開いた際の項目全体 */
.mean-container .mean-nav{
    background:#474f53; /* デフォルトは#0c1923 */
    /* margin-top:44px; 削除 */
}

/* メニュー項目の下階層のリンク */
.mean-container .mean-nav ul li li a{
    color:#f5f5f5; /* カテゴリ一覧に含まれる各カテゴリのリンク色を変更するため追加 */
    /* opacity:.75;
    filter:alpha(opacity=75); 削除 */
}

/* メニュー項目の下階層を表示させるボタン */
.mean-container .mean-nav ul li a.mean-expand{
    height:28px; /* デフォルトは32px,調整のため */
    line-height: 28px;
    top:1px; /* デフォルトは0,調整のため */
    /* margin-top:1px;
    border-left:1px solid rgba(255,255,255,.4)!important;
    border-bottom:1px solid rgba(255,255,255,.2)!important 削除 */
}

/* そのボタンをマウスホバーした時 */
.mean-container .mean-nav ul li a.mean-expand:hover{
    background:#171f23; /* デフォルトはrgba(0,0,0,.9) */
}

@media only screen and (max-width : 400px) {
.mean-container .mean-bar {
    background:#373f43 !important;
}
.mean-container a.meanmenu-reveal{
    color:#f9f9fa !important;
}
}

以上のようにmeanmenu.cssをいじった結果、次のような感じになりました。

meanmenuのcssを調節した後のメニュー

一応手持ちのスマホでも表示を確認したところ、ひとつ気になる点を見つけてしまいました。それは、ページ読み込み時にメニューの中身が一瞬表示されてしまうということ。

この問題点については、meanmenu.cssに以下の記述を追加して解決。

.mean-container .mean-nav ul{
    display:none;
}

ちゃんとメニューバーだけが表示されるようになりました。

これで全設定の終了です。

おわりに

さて、今回は「MeanMenu」というjQueryプラグインを用いたメニュー作成について書いてきましたがいかがだったでしょうか。

このプラグインの問題点をひとつ挙げるとすれば、デフォルトだとウインドウサイズが大きいときに下階層のメニュー(当ブログでいうところのカテゴリ一覧の下にある各カテゴリ項目)が表示出来ないということです。

そのためウインドウ幅が大きいときに多階層メニューを表示させたいという場合には、ある程度の知識が必要なのではないかと思われます。

しかし、下階層が無いメニューを実装したいという人や、特定のウインドウサイズ以下で多階層メニューを表示させたいという人にとっては、かなり便利なjQueryプラグインだと言えるでしょう。

僕のようにjQueryの知識がほとんどない人でも手軽にレスポンシブメニューを導入出来るのでおすすめですよ!

追記:2015年4月29日時点の設定

ブログ名とヘッダーデザインを変更したことにより、記事内で紹介した画像と実際の見た目が異なるものとなりました。そこで参考になるかは分かりませんが、当ブログにおける2015年4月29日時点の設定について追記したいと思います。

基本的には上で紹介した設定と同じなのですが、メニューバーの背景や文字等の色、メニューバーのpaddingmargin、開閉ボタンのフォントサイズと文字間隔を変更しました。

jQueryとCSSのコードは次のような感じになりました。

<script>
jQuery(document).ready(function () {
    jQuery('#meanmenu nav').meanmenu({
    meanMenuContainer: "#meanmenu", 
    meanMenuClose: "CLOSE▲", 
    meanMenuCloseSize: "13px", // ここを16pxから13pxにしました
    meanMenuOpen: "MENU▼", 
    meanRevealPosition: "center", 
    meanScreenWidth: "991", 
});
});
</script>

続いてCSSですが、上のスタイルシートを再び載せると長くなるので、meanmenu.cssで新たに削除・変更・追記した箇所に限定して載せます。

/* メニューバー */
.mean-container .mean-bar{
    background:#231f20;
    /* margin:0; 削除 */
}

/* メニューの開閉ボタン */
.mean-container a.meanmenu-reveal{
    padding: 14px 0px 14px; /* スマホでタッチしやすいように値を大きくしました */
    color: #f3f3f3;
    letter-spacing: 1px; /* 間隔をちょっと狭めました */
    /* font-weight:700; 削除 */
}

/* メニューを開いた際の項目全体 */
.mean-container .mean-nav{
    background:#332f30;
}

/* メニューを開いた際のリンク要素 */
.mean-container .mean-nav ul li a{
    border-top: 1px solid #534f50 ; /* 追記。デフォルトはrgba(255,255,255,.5) */
    font-size: 14px;
}

/* メニュー項目の下階層のリンク */
.mean-container .mean-nav ul li li a{
    background:#433f40;
}

/* そのボタンをマウスホバーした時 */
.mean-container .mean-nav ul li a.mean-expand:hover{
    background:#5fb3d4; 
}

/* @media only screen and (max-width : 400px) {
.mean-container .mean-bar {
    background:#373f43 !important;
}
.mean-container a.meanmenu-reveal{
    color:#f9f9fa !important;
}
} 削除 */

結局長くなってしまいましたが大体こんな感じに前回から変更しました。

補足:当ブログでは動かなくなった件について

記事冒頭でも述べたように、当ブログの環境では正常に動作しなくなってしまいました。明確な原因は今のところ分かっていません。

もし問題が解決したら本記事内で紹介している設定を反映したデモページを再び公開する予定です。

解決したため、前項の設定を反映したデモページを再び公開しました。(2017年8月5日)

なお、動かなくなっていた原因について、「jQuery本体の読み込みが上手くいかなくなっていた」という単純なものでした。ご迷惑をおかけいたしました。