Facebookでおなじみのドロワーメニューを実装できるjQueryプラグン「Drawer Slide Menu」!

2014/09/04

こんにちは。
今回はFacebookでおなじみのドロワーメニューを実装できるjQueryプラグン「Drawer Slide Menu」の紹介をしたいと思います。

スマホサイトでドロワーメニューを実装する機会があり、「Drawer Slide Menu」がいい感じに動いてくれたのでメモです。

Facebookでおなじみのドロワーメニューを実装できるjQueryプラグン「Drawer Slide Menu」!

ドロワーメニューとは

ドロワーメニューとはこんなやつです。
Facebookでおなじみのやつ!

drawer-slide-menu1

 

まずは本家サイトの紹介です。

drawer-slide-menu

Drawer Slide Menu | jQuery plugin for responsive menu

 

設置してみよう!

本家サイトからダウンロードします。
Download

ダウンロードしたファイルのjquery.mobile-menu.jsとstyles.cssを読み込みます。
jQueryを読み込み、その下にjquery.mobile-menu.jsを読み込みます。

 

先程の下に下記のスクリプトを記述します。

 

html部分を記述します。

Demo

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

いかがでしたか。
ドロワーメニューを実装する方法はいくつかあるのですが、簡単にサクサク動いてくれるのでオススメです。

以上でFacebookでおなじみのドロワーメニューを実装できるjQueryプラグン「Drawer Slide Menu」の紹介でした。

topへ戻る