Webサイトのヘッダーメニューをさくっとスマートフォンに対応させる

Android
iPhone

Webサイトのヘッダーメニューをさくっとスマートフォンに対応させる

今やスマホ対応はWebサイトに取って必須ですが、めんどうっちゃ面倒ですよね。
cssが導入してあるサイトであれば、メディアクエリなどを利用すれば、とりあえずの見た目は簡単に変更できると思います。

ただ、ヘッダーメニューはプルダウンメニューなどにしていたり、多階層になっていたりなどでスマートフォン対応が難しくなってしまう部分の一つ…。
そこで、ヘッダーメニューをさくっとスマホ対応させてくれるJavascriptライブラリの紹介です。

Slimmenu.js
http://adnantopal.github.io/slimmenu/

PC版だとこういう見た目のヘッダーメニューが

スマホでこうなります。

実装もとーっても簡単!

上記のslimmenuのサイトから、Zipなどをダウンロードしてきて、読み込みたいhtmlの中で、slimmenu.cssとjquery.slimmenu.min.jsを読み込みます。

そして、ヘッダーメニューを下記のように書きます。

 <ul id="navigation" class="slimmenu">...</ul>

最後にslimmenuを実行するように、下記を内に記述し、Javascriptを実行します。

 <script>
 $('#navigation').slimmenu(
 {
    resizeWidth: '800', //画面幅がこのピクセル以下になったらスマホ対応メニューにするという設定
    collapserTitle: 'Main Menu', //スマホ表示になった時のヘッダーメニュータイトルの名前
    animSpeed: 'medium',
    easingEffect: null,
    indentChildren: false,
    childrenIndenter: '&nbsp;'
 });
 </script>

ちなみに、最初は
Bootstrap
http://getbootstrap.com/2.3.2/
でやろうと思ってたんですが、ちょっと機能が多すぎて、既存のサイトにすぐ使うには重いなー、というのが印象でした。

最初からサイトを作る時には、Bootstrapがいいのかと思われます。