「meanmenu.js」の横に文字を表示する為のカスタマイズ
スマホ用レスポンシブメニューを作成できるjQueryのプラグイン『MeanMenu』。
今回、このプラグインを元に、ハンバーガーメニュー（三本線のアイコン）の横に「menu」と入れるカスタマイズしようとしたのですが、かなり苦戦したので情報を残しておきます。
オプションでできるはずなのに…
本来、オプションとして用意されている「meanMenuOpen:●●●」を使えば、メニュー横に指定した文字を表示できるはずなんです。
※「#meanmenu nav」の部分は人それぞれなので注意！
ところが、一度タップして開閉しないと表示されません。
しかも、三本線マークの横に「menu」を表示させたいので、三本線マークの上に「menu」が表示されてしまっている状態です。
CSSを書き換えて解決！
この問題を解決するには、『meanmenu.css』を書き換える必要があります。
コードを以下のように書き換えて下さい（赤文字は追加するコード）
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;」により、文字が画面外に飛ばされていた。
「何かこうしないといけない理由があったのか？」制作者の意図は分かりませんが、今のところ問題なく動いてます。
ちなみにスマホで見ているとき、タップした際に選択範囲がハイライトされるのですが、開いた時と閉じた時の幅の違いが気になったので、半角スペース（ ）をいれて調整しました。
文章では伝わりにくいですが、実際にスマホで見てみると分かると思います。