jQueryのslideDown・slideUpを使ってスマートフォンのメニューを作る
スマホサイトで見かける画面の外からにゅっと出てくるメニューを見る度に、jQueryのslideDown・slideUpを使えばわりと簡単に実装できるのでは？と思っていましたので、やってみました。 僕の会社でも時代の流れかスマートフォンに対応する案件が増えて来ております。コンテンツの少ないサイトなら問題ないのですが何十ページもあるサイトをスマートフォン化するときはインターフェイスに悩みます。 理想は片手で操作しやすく、導線的にも分かりやすいユーザビリティーに富んだインターフェイスです。まぁあたり前のことなのでしょうが実際にこれを実現しようとすると難しい・・・・やはりここでもサイトで最大限に効果を発揮するにはマーケティングによる徹底的なターゲットの絞り込みなのでしょう！普通に本題からそれましたが、まず何も考えずにslideDown・slideUpだけでメニューを表示してみました。
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(function($){ $('#dnonebtn').click(function () { $("#dblock").slideDown(300); }); $('#dblockbtn').click(function () { $("#dblock").slideUp(300); }); }); </script> |
CSSです。
|
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 33 34 35 36 37 38 39 40 41 |
*{margin:0; padding:0;} body{font-family:sans-serif; text-align:center;} #dblock{ bottom:0; display:none; width: 100%; height:100%; float:left; background:#eee; position: absolute; overflow: auto; z-index:99; } h1{margin-bottom:20px;} .block,.block02{ width:100%; padding:200px 0; margin-bottom:20px; } .block{background:#0CF;} .block02{background:#FC3;} #dblock p{ margin-top:20px;} #dblock li{margin-bottom:15px;} #dblockbtn,#dnonebtn{ padding:14px 20px; border:1px solid #111; background:#444; color:#fff; font-weight:bold; outline:none; margin-bottom:20px; cursor:pointer; } |
HTMLです。
|
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 33 34 35 36 37 |
〜 <script src="js/jquery-1.10.2.min.js"></script> 〜 <body> <article id="wrapper"> <h1>slideDown・slideUp</h1> <p><button id="dnonebtn">MENU OPEN</button></p> <div class="block"> <p>contents</p> </div> <div class="block02"> <p>contents02</p> </div> </article> <nav id="dblock"> <p><button id="dblockbtn">MENU CLOSE</button></p> <ul> <li>ナビゲーション</li> 〜 <li>ナビゲーション</li> </ul> <div class="block"> <p>contents</p> </div> <ul> <li>ナビゲーション</li> 〜 <li>ナビゲーション</li> </ul> <div class="block"> <p>contents</p> </div> </nav> </body> 〜 |
あれ？案外行けてるんじゃない？と思ったのもつかの間、メニューと同時にコンテンツもスクロールしています。なのでtoggleでコンテンツを非表示にしてみることにしました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(function($){ $("#wrapper").css("display", "block"); $('#dnonebtn').click(function () { $("#dblock").slideDown(300); $("#wrapper").toggle(0); }); $('#dblockbtn').click(function () { $("#dblock").slideUp(300); $("#wrapper").toggle(0); }); }); </script> |
CSSとhtmlは同じです。 こんどこそできた！と思ったのもつかの間メニューを連打すると普通に誤動作を起こしてしまいます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(function($){ $("#wrapper").css("display", "block"); $('#dnonebtn').click(function () { $("#dblock").slideDown(300 , function(){ //コールバック関数でメニュー出現後にwrapをdisplay:none;に $("#wrapper").toggle(0); }); }); $('#dblockbtn').click(function () { $("#dblock").slideUp(300); $("#wrapper").toggle(0); }); }); </script> |
コールバック関数で処理を送らせますが、連打で誤動作は解消されず！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(function($){ $("#wrapper").css("display", "block"); $('#dnonebtn').click(function () { $("#dblock").slideDown(300 , function(){ //コールバック関数でメニュー出現後にwrapをdisplay:none;に $("#wrapper").toggle(0); $(this).clearQueue([]); //クリック連打でwrapのdisplayが誤動作を起こさないようにキューをクリアする }); }); $('#dblockbtn').click(function () { $("#dblock").slideUp(300); $("#wrapper").toggle(0); }); }); </script> |
クリック連打で誤動作を起こさないようにメニューが出現したらキューをクリアするようにしました。 とりあえずいったんはこれで大丈夫かな？後はイージングで滑らかにしたりクリックをタップにしたいですね。
- 2013年10月17日木曜日
- ：Naruhiko Wakai
comments