jQueryでドロワーメニューの作成
■やりたかった事
スマホ用サイトにドロワーメニューを設置したかった。
■方法
よさげなプラグインは2つあり。
1つ目はスワイプ(フリック?)非対応。
http://jquer.in/javascript-and-jquery-solutions-for-fantastic-mobile-websites/drawer-slide-menu/
CSSとJSファイルを呼び出して、必要なIDとか振るだけ。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="styles.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/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> </head> <body> <nav id="mobile-bar"></nav> <nav id="main-nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Nav 2</a></li> <li><a href="#">Nav 3</a></li> <li><a href="#">Nav 4</a></li> <li><a href="#">Nav 5</a></li> <li><a href="#">Nav 6</a></li> </ul> </nav> </body> </html>
※サンプル
http://sample.taitan916.info/drawer/
2つ目はスワイプ(フリック)対応。
https://github.com/be-hase/sp-slidemenu
<!DOCTYPE html> <html lang="ja"> <head> <link href="./css/styles.css" rel="stylesheet" type="text/css"> </head> <body> <div class="slidemenu slidemenu-left"> <div class="slidemenu-header"> <div> Header </div> </div> <div class="slidemenu-body"> <ul class="slidemenu-content"> <li><a class="menu-item" href="">Menu 1</a></li> <li><a class="menu-item" href="">Menu 2</a></li> <li><a class="menu-item" href="">Menu 3</a></li> <li><a class="menu-item" href="">Menu 4</a></li> <li><a class="menu-item" href="">Menu 5</a></li> </ul> </div> </div> <div id="main"> <header id="header"></header> <span class="button menu-button-left"></span> <div id="contents"> <p> <a href="demo1.html">menu</a> </p> </div> <!-- contents --> </div> <script src="sp-slidemenu.js" type="text/javascript"></script> <script> //<![CDATA[ var menu = SpSlidemenu({ main : '#main', button: '.menu-button-left', slidemenu : '.slidemenu-left', direction: 'left' }); //]]> </script> </body> </html>
こちらはjqueryを用いてない模様。なので、scriptの位置気をつけないとダメっぽい。
といってもjquery読んでいるページでやるのであれば、
$(function(){ var menu = SpSlidemenu({ main : '#main', button: '.menu-button-left', slidemenu : '.slidemenu-left', direction: 'left' });
こうしてしまえばいい。
※サンプル
http://sample.taitan916.info/drawer2/
■その他
メニューのアイコンとか画像素材はこちらが良さそう。
https://www.iconfinder.com/icons/106200/menu_icon#size=24
関連記事
FormDataを使ったAjax通信がiPhoneのみエラー
FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAn ...
jQueryuiを用いてメールの入力補助(サジェスト)
autocompleteを用いた簡易なサジェストを見かけたのでメモ。 ■ソース ...
jQueryプラグインを作成する方法
jQueryのプラグインを作ってみたかった。 というのも大抵のものはググったらあ ...
スクロールしてもついてくる追尾型の広告を作る方法
スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...
jQueryでコンテンツのスライド
jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...