公開日:2017年8月4日

「meanmenu.js」の横に文字を表示する為のカスタマイズ

スマホ用レスポンシブメニューを作成できるjQueryのプラグイン『MeanMenu』。

今回、このプラグインを元に、ハンバーガーメニュー(三本線のアイコン)の横に「menu」と入れるカスタマイズしようとしたのですが、かなり苦戦したので情報を残しておきます。

オプションでできるはずなのに…

本来、オプションとして用意されている「meanMenuOpen:●●●」を使えば、メニュー横に指定した文字を表示できるはずなんです。

コピペ用コード

※「#meanmenu nav」の部分は人それぞれなので注意!

ところが、一度タップして開閉しないと表示されません。

しかも、三本線マークの横に「menu」を表示させたいので、三本線マークの上に「menu」が表示されてしまっている状態です。

CSSを書き換えて解決!

この問題を解決するには、『meanmenu.css』を書き換える必要があります。

コードを以下のように書き換えて下さい(赤文字は追加するコード)

.mean-container a.meanmenu-reveal {
        width: 22px;
        height: 22px;
        padding: 13px 13px 11px 13px;
        padding: 13px 6px 11px 60px;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        color: #fff;
        text-decoration: none;
        font-size: 16px;
        text-indent: -9999em;
        line-height: 22px;
        font-size: 1px;
        display: block;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 700;
}
.mean-container a.meanmenu-reveal div {
        position:relative;
        right:40px;
        float:left;
}

.mean-container a.meanmenu-reveal span {
        display: block;
        background: #fff;
        height: 3px;
        margin-top: 3px;
        width:22px;
}

オプションが効かない原因は何だったのか?

オプションを指定しても、タップ指定からでないと「menu」が表示されなかった原因は二つ。

「font-size: 1px;」により、文字が小さく表示されてしまっていた。

「text-indent: -9999em;」により、文字が画面外に飛ばされていた。

「何かこうしないといけない理由があったのか?」制作者の意図は分かりませんが、今のところ問題なく動いてます。

ちなみにスマホで見ているとき、タップした際に選択範囲がハイライトされるのですが、開いた時と閉じた時の幅の違いが気になったので、半角スペース( )をいれて調整しました。

文章では伝わりにくいですが、実際にスマホで見てみると分かると思います。

コピペ用コード

関連情報