スマホアプリでよく見る横から出てくるスライドメニューを実装できるjQueryのプラグイン「Sidr」。
2015/01/12
スマホ向けサイトを作成の際、メニューをスマホアプリのように横から出したくなり探しました所、「Sidr」というプラグインを発見。
非常に手軽に実装できたのでそのご紹介。
Sidrでスライドメニューを実装
ということがしたいのか。
Facebookアプリのような、「三」のようなアイコンをクリック（タップ）すると、左側からメニューがせり出してくる、というのの実装。
Sidrの設定
Sidr - A jQuery plugin for creating side menus
http://www.berriart.com/sidr/
使い方はいたって簡単。
以下のソースで実装可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <!-- Include jQuery --> <script src="javascripts/jquery.js"></script> <!-- Include the Sidr JS --> <script src="javascripts/sidr/jquery.sidr.min.js"></script> <!-- Include Sidr bundled CSS theme --> <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css"> </head> <body> <a id="simple-menu" href="#sidr">Toogle menu</a> <div id="sidr"> <!-- Your content --> <ul> <li><a href="#">List 1</a></li> <li class="active"><a href="#">List 2</a></li> <li><a href="#">List 3</a></li> </ul> </div> <script> $(document).ready(function() { $('#simple-menu').sidr(); }); </script> </body> </html> |
テンプレは dark と white の２通りが用意されています。
このテンプレは必ず読みこむ必要があります。
「Toogle menu」をクリックすると、左側から用意したメニューがせり出してきます。
簡単ですね！
作者様サイトには両側からメニューを出すタイプやレスポンシブなタイプなど、数種類用意されているので、試してみてはいかがでしょうか。
[tgAmazonItemLookup asin="4844362720" related="1"]