スマホサイトで使う開閉メニューを3つ程作って試して見た
- Date：
- Category：MVサイト製作日記, Javascript
- Tags：css, jQuery, Javascript
- Response：Comments 1
-
MVサイト製作日記 part.05
スマホ用のページを作っていて悩んだのがナビゲーション部分です。個人的に開閉式（ページを開いた時は見えなくて、ボタンを押すとメニューが開く）はあまり好きではなく、始めから全て画面に表示させていたのですが、メニューの数が多くなるとそうも言っていられません。
というわけで、3つほど開閉するメニューを作って比べてみました。
前置き
全ての方法にjQueryを使っています。
このサイトの記事用にテンプレートを作っているので、無駄なcssや、今から作るメニューのhtmlに非効率なid等が混ざってますので予めご了承くださいませ＾＾；
サンプルで使うHTMLとCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="spMenuTest"> <section> <header>Header <div class="spMenuTestBtn">menu</div> </header> <ul> <li><a href="">menu1</a></li> <li><a href="">menu2</a></li> <li><a href="">menu3</a></li> <li><a href="">menu4</a></li> <li><a href="">menu5</a></li> </ul> <div class="contents">Contents</div> <footer>Footer</footer> </section> </div> |
|
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 42 43 44 45 46 47 48 49 50 51 52 53 |
.spMenuTest * { box-sizing: border-box; } .spMenuTest li { list-style-type: none; } .spMenuTest ul { margin: 0; } .spMenuTest { border: #aba097 solid 1px; } .spMenuTest section { margin: 0 20px; position: relative; width: 250px; } .spMenuTest header { background: #1b1310; color: #fff9ef; padding: 1rem; position: relative; } .spMenuTest .spMenuTestBtn { background: #fff9ef; color: #1b1310; cursor: pointer; float: right; padding: .5rem; position: absolute; right: .5rem; text-align: center; top: .5rem; width: 5rem; } .spMenuTest .contents { border-left: #aba097 solid 1px; border-right: #aba097 solid 1px; padding: 1rem; height: 8rem; width: 100%; } .spMenuTest ul{ background: #ebe5dc; display: none; } .spMenuTest li { padding: .5rem 1rem; } .spMenuTest footer { background: #aba097; padding: 1rem; } |
上記のようなテンプレートを使いメニューを作っていきます。
実際のサイトでう使う場合は「section」部分が「body」だと思ってください。
要素を広げて開閉する
menu
Contents
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="spMenuTest01" class="spMenuTest"> <section> <header>Header <div id="spMenuTestBtn01" class="spMenuTestBtn">menu</div> </header> <ul id="spMenuTestNav01"> <li><a href="">menu1</a></li> <li><a href="">menu2</a></li> <li><a href="">menu3</a></li> <li><a href="">menu4</a></li> <li><a href="">menu5</a></li> </ul> <div class="contents">Contents</div> <footer>Footer</footer> </section> </div> |
|
1 2 3 4 5 |
jQuery(function($){ $('#spMenuTestBtn01').bind("click", function(){ $('#spMenuTestNav01').slideToggle(200); }); }); |
menuボタンを押すと、単純に隠れている要素が広がってメニューが表示されます。
開閉の仕方はjQueryの「slideToggle」を使っているので誰でも簡単に作れます。
これだけではなく「toggle」自体とても便利なので、興味があるかたはググって見てください。
js部分の設置の仕方
- jsファイルの2行目に、メニューを開閉する為のボタンに付けたｉｄ名を指定します。
- そして3行目には実際に開閉するメニューのｉｄ名を指定します。
メリット
- Html/cssが簡単
- 他の要素に被らないので、隠れて見えなくなるコンテンツが無い
デメリット
- メニューを開くとページ全体が長くなる
- メニューが多いと、メインのコンテンツまでが遠い
要素を重ねて開閉する
menu
Contents
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="spMenuTest02" class="spMenuTest"> <section> <header>Header <div id="spMenuTestBtn02" class="spMenuTestBtn">menu</div> </header> <ul id="spMenuTestNav02"> <li><a href="">menu1</a></li> <li><a href="">menu2</a></li> <li><a href="">menu3</a></li> <li><a href="">menu4</a></li> <li><a href="">menu5</a></li> </ul> <div class="contents">Contents</div> <footer>Footer</footer> </section> </div> |
|
1 2 3 4 5 |
#spMenuTest02 #spMenuTestNav02 { position: absolute; width: 250px; z-index: 99; } |
|
1 2 3 4 5 |
jQuery(function($){ $('#spMenuTestBtn02').bind("click", function(){ $('#spMenuTestNav02').slideToggle(200); }); }); |
cssは、テンプレートと違う部分のみ書いています。
1つ目と違うのは、メニューをpositionを使って浮かせていることです。その他は1つ目と作り方は同じです。
js部分の設置の仕方
- jsファイルの2行目に、メニューを開閉する為のボタンに付けたｉｄ名を指定します。
- そして3行目には実際に開閉するメニューのｉｄ名を指定します。
メリット
- Html/cssが簡単
- 自分が知っている中ではこのパターンが1番多い気がするので、ユーザーが迷わない
デメリット
- すぐ下のコンテンツに被るので、ブログでいうと1番新しい記事が隠れる
要素を横から重ねて開閉する
menu
Contents
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="spMenuTest03" class="spMenuTest"> <section> <header>Header <div id="spMenuTestBtn03" class="spMenuTestBtn">menu</div> </header> <ul id="spMenuTestNav03" class="spMenuTestNav03"> <li><a href="">menu1</a></li> <li><a href="">menu2</a></li> <li><a href="">menu3</a></li> <li><a href="">menu4</a></li> <li><a href="">menu5</a></li> </ul> <div class="contents">Contents</div> <footer>Footer</footer> <div id="spMenuTestModal03" class="spMenuTestModal"></div> </section> </div> |
|
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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
#spMenuTest03 section { overflow: hidden; } #spMenuTest03 .spMenuTestNav03 { bottom: 0; display: block; overflow-x: hidden; overflow-y: auto; position: absolute; right: 0; top: 0; -webkit-transform: translateX(181px); -moz-transform: translateX(181px); -ms-transform: translateX(181px); -o-transform: translateX(181px); transform: translateX(181px); webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition-delay: .1s; -moz-transition-delay: .1s; transition-delay: .1s; -webkit-transition-duration: .2s; -moz-transition-duration: .2s; transition-duration: .2s; -webkit-transition-property: (),-webkit-transform; -moz-transition-property: (),-moz-transform; transition-property: (),transform; -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1); -moz-transition-timing-function: cubic-bezier(.4,0,.2,1); transition-timing-function: cubic-bezier(.4,0,.2,1); width: 180px; z-index: 99; visibility: hidden; } #spMenuTest03 .on { visibility: visible; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .spMenuTestModal { background-color: rgba(255,255,255,.5); height: 100%; left: 0; opacity: .1; position: absolute; top: 0; webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1); -moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1); transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1); webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); visibility: hidden; width: 100%; z-index: 98; } .spMenuTest .on { opacity: 1; webkit-transition-delay: 0; -moz-transition-delay: 0; transition-delay: 0; visibility: visible; } |
|
1 2 3 4 5 6 7 8 9 10 |
jQuery(function($){ $('#spMenuTestBtn03').bind("click", function(){ $('#spMenuTestNav03').addClass("on"); $('#spMenuTestModal03').addClass("on"); }); $('#spMenuTestModal03').bind("click", function(){ $('#spMenuTestNav03').removeClass("on"); $(this).removeClass("on"); }); }); |
cssは、テンプレートと違う部分のみ書いています。
また、8行目と52行目はこの記事用に「absolute」を使ってますが、実際のサイトで使う時は、「fixed」を使ってください。
css部分の81行目～85行目までのサイズ指定は、103行目で指定したサイズ+1pxで指定してください。また、左側に設置する場合は「translateX(-181px)」みたく、マイナス指定します。
動き部分はcss3を使っています。jQueryだけでも同様の事ができますが、Googleさんがこの方法使っていたので、css3を使ってみました。
jQueryは、要素にclassを追加・削除するだけに使っています。
js部分の設置の仕方
- jsファイルの2行目に、メニューを開閉する為のボタンに付けたｉｄ名を指定します。
- 3行目と7行目には実際に開閉するメニューのｉｄ名を指定します。
- 4行目と6行目にはモーダル部分のｉｄ名を指定します。（Htmlの15行目で指定したid名）
メリット
- 下のコンテンツに被さるが、全部隠れる訳では無い
- Googleさんも使っている
デメリット
- css3を使っている
- 少し複雑なので理解しづらい
チラシの裏
結局このサイトでは1つ目のパターンで作りました。
理由はやっぱり、コンテンツ部分に被さるのが嫌だったからです。
また、1つ目と2つ目のパターンもjquery.easing.1.3.jsと組み合わせる事で動きに変化をつける事ができます。
その際、こちらの記事で動きの参考にしてください。
- イージングの動き見本（サンプル）【Javascript / jQuery】
- └https://muumv.com/easing/
[…] スマホサイトで使う開閉メニューを3つ程作って試して見た […]