スマホ版サイトをコーディングする場合、意外と悩むべきところはメニューボタンの場所と表示方法かと思います。
表示方法で良く見かけるパターンは大体3つほど。
- 右上にボタンがあり、押すと上からぬるっと表示する
- 左上にボタンがあり、押すと右からぬるっと表示する
- レイアウトのヘッダーあたりにボタンがあり、クリックするとその下に表示する
JavaScriptで動作構築することが多かったのが、CSSだけで構築することもできるようになり、スマホ版メニュー構築が幅広くできたため、上記のパターンから多方面にバリエーション変えていく感じでしょうか。
ただ、表示させるボタンを右上や左上に設置するも、ヘッダーを固定するかしないかによって操作性も変わるでしょうし、コンテンツの見せ方もかわるので、どのような設置方するかはこれといって決めるのは難しいところです。
ここではよくある定番のもののソースを記録しておきます。
HTML
<div id="header">
<span class="site_name">サイト名</span>
<div class="sp_nav_btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="nav">
<nav class="sp_nav_list" style="display: none">
<ul>
<li><a href="#">nav1</a></li>
<li><a href="#">nav2</a></li>
<li><a href="#">nav3</a></li>
<li><a href="#">nav4</a></li>
<li><a href="#">nav5</a></li>
</ul>
</nav>
</div>
<div class="sp_nav_back">
<div class="content_cover"></div>
</div>
CSS
#header {
text-align: center;
position: relative;
font-size: 16px;
padding: 0.5em;
}
#header .site_name {
display: inline-block;
}
#header .sp_nav_btn {
display: inline-block;
position: absolute;
z-index : 3;
right : 1em;
top : 0;
width : 2em;
height: 2em;
cursor: pointer;
text-align: center;
}
#header .sp_nav_btn span {
display : block;
position: absolute;
width : 2em;
height : 0.1em ;
background : #555;
-webkit-transition: 0.3s ease-in-out;
-moz-transition : 0.3s ease-in-out;
transition : 0.3s ease-in-out;
}
#header .sp_nav_btn span:nth-child(1) {
top: 0.5em;
}
#header .sp_nav_btn span:nth-child(2) {
top: 1.0em;
}
#header .sp_nav_btn span:nth-child(3) {
top: 1.5em;
}
#header .sp_nav_btn.active span:nth-child(1) {
top : 1em;
-webkit-transform: rotate(-45deg);
-moz-transform : rotate(-45deg);
transform : rotate(-45deg);
}
#header .sp_nav_btn.active span:nth-child(2),
#header .sp_nav_btn.active span:nth-child(3) {
top: 1em;
-webkit-transform: rotate(45deg);
-moz-transform : rotate(45deg);
transform : rotate(45deg);
}
#header .sp_nav_btn.active span:nth-child(1) {
top : 1em;
-webkit-transform: rotate(-45deg);
-moz-transform : rotate(-45deg);
transform : rotate(-45deg);
}
#header .sp_nav_btn.active span:nth-child(2),
#header .sp_nav_btn.active span:nth-child(3) {
top: 1em;
-webkit-transform: rotate(45deg);
-moz-transform : rotate(45deg);
transform : rotate(45deg);
}
#nav {
position: relative;
z-index : 2;
top : 0;
left : 0;
color: #fff;
background: rgba(0,0,0,0.7);
text-align: center;
width: 100%;
transition: opacity .6s ease, visibility .6s ease;
}
#nav nav.sp_nav_list ul {
margin: 0 auto;
padding: 0;
width: 100%;
}
#nav nav.sp_nav_list ul li {
list-style-type: none;
padding: 0;
width: 100%;
transition: .4s all;
}
#nav nav.sp_nav_list ul li:last-child {
padding-bottom: 0;
}
#nav nav.sp_nav_list ul li:hover{
background :#ddd;
}
#nav nav.sp_nav_list ul li a {
display: block;
color: #fff;
padding: 1em 0;
text-decoration :none;
}
.sp_nav_back .content_cover {
position: relative;
width: 100%;
visibility: hidden;
z-index: -1;
-webkit-transition: .3s;
transition: .3s;
}
.sp_nav_back.active .content_cover {
height:100vh;
visibility: visible;
background:rgba(0,0,0,0.4);
z-index:1000;
}
html.is-fixed,
html.is-fixed body {
height: 100%;
overflow: hidden;
}
jQuery
$(function() {
$('.sp_nav_btn').click(function() {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
open_nav();
} else {
close_nav();
}
});
$('.sp_nav_back').on('click',function(){
$('.sp_nav_btn').removeClass('active');
close_nav();
});
});
function open_nav () {
$('nav.sp_nav_list').addClass('active').slideDown('500');
$('.sp_nav_back').addClass('active');
$('html').addClass("is-fixed");
}
function close_nav () {
$('nav.sp_nav_list').removeClass('active').slideUp('500');
$('.sp_nav_back').removeClass('active');
$('html').removeClass("is-fixed");
}
});
大事だと思ったことは、メニューを表示したとき、どのように閉じる仕様にするかを考えることかと。上部にヘッダーを固定しない場合、メニューを表示したまま画面をスライドするとメニューもスライドしていき、閉じないまま画面から消えていき、ページ遷移する場合また上部へ移動する必要があります。
その場合、画面下あたりにでもトップへ戻る内部リンクボタンを設置したりする工夫が必要となります。
上部にヘッダーを固定した場合、その分画面の一部を占領するためコンテンツ表示枠が少なくなりますが、メニューはいつでも表示が可能となります。
今回のソースのポイントとして、メニューを表示した場合、スクロールはCSSによりできない仕様にし、また、メニュー以外の場所をタップするとメニューが消えるようにグレーのバックグラウンドをdivタグで作成しました。
ヘッダー固定の場合もスクロール禁止とメニュー以外タップの動作を構築すると便利かと思います。
ハンバーガーメニューのソースの参考サイト