【jQuery】横からヌルっと出てくるドロワーメニューの実装方法

　以前、【jQuery】スマートフォンサイトで使える！上からヌルッと出てくるドロワーメニューの実装方法という記事にて上からヌルっと出てくるドロワーメニューのjQueryを紹介しましたが、今回は横から出てくるドロワーメニューの実装方法について紹介したいと思います！

　まず、以下のデモページのようにドロワーメニューを実装したいと思います。
デモページ

1. jQueryをダウンロード

　まず、Drawer Slide MenuからjQueryの入ったzipファイルをダウンロードします。
ダウンロードしたzipファイルを解凍すると以下の画像のようにファイルが入っていると思います。

2. ドロワーメニューをサイトに実装

　次に実際にドロワーメニューをサイトに実装したいと思います！

1. ドロワーメニューのコードを記述する

　まず、実際にドロワーメニューになる部分を以下のように記述します。

<link rel="stylesheet" href="styles.css">

<nav id="mobile-bar"></nav>
<nav id="main-nav">
    <ul>
        <li><a href="#">リンク</a></li>
        <li><a href="#">リンク</a></li>
        <li><a href="#">リンク</a></li>
        <li><a href="#">リンク</a></li>
    </ul>
</nav>

ちなみに、上のコードの
<nav id=”mobile-bar”></nav>
がメニューを開く時のボタンになります。

2. ドロワーメニューのjQueryのコードを記述する

　続いて、jQueryのコードを記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.mobile-menu.js"></script>
<script>
    $(function(){
        $("body").mobile_menu({
            menu: ['#main-nav ul'],  //ドロワーメニューに表示させる内容
            menu_width: 200,        //ドロワーメニューの幅のサイズ
            prepend_button_to: '#mobile-bar' //トグルとなるボタン
        });
    });
</script>

以上でドロワーメニューが実装できるようになると思います！

3. ドロワーメニューのデザインを変更する

　続いて、ドロワーメニューのデザインを決めていきたいと思います！

1. ボタンの文字およびメニューの幅を設定する

　まず、ドロワーメニューを表示させるボタンとメニューの幅のデザインを設定します。
これを変更するにはjquery.mobile-menu.js内にある以下の部分を変更します。

  MobileMenu.prototype = {
    defaults: {
      page_id: 'build-menu-page',
      menu: '', // set as an array for multiple menus
      menu_width: 200, //メニューの幅を設定
      menu_id: "mobile-nav",
      button_content: 'MENU', //ボタンに表示させる文言
      prepend_button_to: '',
      menu_bar: ''
    },

ちなみに、上のコードの
menu_width: 200,
はHTMLに記述したjQueryコードの
menu_width: 200,
と同じ数値にしておきましょう。

　また、
button_content: ‘MENU’,
がボタンの文言になるので、
button_content: ‘≡’,
とすると上で紹介したデモページのように「≡」がボタンとなります。
なので、ボタンを画像で表示したい場合には
button_content: ‘<img src=”画像のファイル名”>’,
とすることで画像がボタンになります(^^)

2. ボタンのデザインをCSSで設定する

　続いて、ボタンをCSSで設定するには、以下のようにCSSを記述します。

a#build-menu-button {
	display: block;
	background: #000; //ボタンの背景色
	color: #fff; //ボタンの文字色
	font-size: 40px; //ボタンの文字の大きさ
	width: 50px; //ボタンの幅
	height: 50px; //ボタンの高さ
	text-align: center;
	line-height: 50px;
	border-radius: 10px;
	text-decoration: none;
	margin: 10px 0 0 10px;
}

　その他いろいろとCSSで設定できるので、いろいろ試してみましょう！

応用：ドロワーメニューを右からヌルっと出すには

　また、サイトによってはドロワーメニューを右から出したい時があると思います。その時にはまずCSSにて#build-menuにfloat: right;を設定します。
　続いて、jquery.mobile-menu.jsの

page.css({
   "-webkit-transform": "translateX("+_this.config.menu_width+"px"+")",
   "-moz-transform": "translateX("+_this.config.menu_width+"px"+")",
   "-o-transform": "translateX("+_this.config.menu_width+"px"+")",
   "-ms-transform": "translateX("+_this.config.menu_width+"px"+")",
   "transform": "translateX("+_this.config.menu_width+"px"+")"
   });

を

page.css({
   "-webkit-transform": "translateX(-"+_this.config.menu_width+"px"+")",
   "-moz-transform": "translateX(-"+_this.config.menu_width+"px"+")",
   "-o-transform": "translateX(-"+_this.config.menu_width+"px"+")",
   "-ms-transform": "translateX(-"+_this.config.menu_width+"px"+")",
   "transform": "translateX(-"+_this.config.menu_width+"px"+")"
   });

と“-”を付けることで右からドロワーメニューがヌルっと出てくるようになります！

まとめ

　以上が横からヌルっと出てくるドロワーメニューの実装方法になります！デザインに関してはいろいろとあるので、自分の好みのデザインにできるよういろいろと試してみましょう(*^-^)