皆さんこんにちは、サポート部の山本です。夏の暑さも一段落し、朝晩の気温も下がり過ごしやすくなってきましたね。
さて、今回はスマホサイトでもよく採用されているドロワーメニューの設置方法を、レスポンシブwebデザインに対応した形でご案内します。
実装サンプル
スマホでは以下のように動作します。ハンバーガーメニューをタップすると、中に入っているメニューが現れます。
PCサイズになると下図のように大項目のメニューが横並びになり、その下にサブメニューが表示されるような実装をしていきます。
デモサイトは以下になります。
ステップ1：head内の記述
まずはhead内で以下を読み込ませます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
ステップ2：HTMLの記述
次にbody内にHTMLを記述していきます。MENUやSUB MENUは任意の文字に置き換えて下さい。
<div id="wrapper">
<header role="banner">
<div class="headerTop">
<div class="siteTitle"><a href="#">SAMPLE SHOP</a></div>
</div>
<div class="navDrawrBtn"><span></span></div>
<nav class="navDrawr" role="tablist">
<ul>
<li><a href="#" role="tab">MENU A</a>
<ul class="sub" role="tabpanel">
<li><a href="#">SUB MENU</a></li>
<li><a href="#">SUB MENU</a></li>
<li><a href="#">SUB MENU</a></li>
</ul>
</li>
<li><a href="#" role="tab">MENU B</a>
<ul class="sub" role="tabpanel">
<li><a href="#">SUB MENU</a></li>
<li><a href="#">SUB MENU</a></li>
<li><a href="#">SUB MENU</a></li>
</ul>
</li>
<li><a href="#" role="tab">MENU C</a>
<ul class="sub" role="tabpanel">
<li><a href="#">SUB MENU</a></li>
<li><a href="#">SUB MENU</a></li>
<li><a href="#">SUB MENU</a></li>
</ul>
</li>
<li><a href="#" role="tab">MENU D</a>
<ul class="sub" role="tabpanel">
<li><a href="#">SUB MENU</a></li>
<li><a href="#">SUB MENU</a></li>
<li><a href="#">SUB MENU</a></li>
</ul>
</li>
</ul>
</nav>
</header>
</div>
ステップ3：CSSの記述
CSSも少し長いですが、以下を参考に記述していきます。クラス名等が重複する場合は、HTMLのソースと共に任意の値に編集してください。
header {
background-color: #fff;
}
header .headerTop{
padding:20px;
}
header .siteTitle a{
display: block;
font-size: 18px;
color: #900000;
font-weight: bold;
text-decoration: none;
}
.navDrawr>ul:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.navDrawr>ul>li {
float: left;
width: 25%;
position: relative;
}
.navDrawr a {
display: block;
color: #fff;
text-decoration: none;
background: #B00000;
padding: 10px;
}
.navDrawr .sub li:last-child a {
border: none;
}
.navDrawr>ul>li>a {
border-right: 1px solid #900000;
text-align: center;
}
.navDrawr>ul>li>a:hover {
background: #E00000;
}
.navDrawr .sub {
position: absolute;
left: 0;
right: 0;
z-index: 9999;
}
.navDrawr .sub a {
background: #900000;
border-bottom: 1px solid #600000;
padding: 10px 10px 10px 20px;
}
.navDrawr .sub a:hover {
background: #F00000;
}
#contents{
padding-top:20px;
}
@media only screen and (max-width: 768px) {
#wrapper{
overflow:hidden;
}
.navDrawr {
background-color: #666;
position: fixed;
width: 270px;
top: 60px;
bottom: 0;
right: -270px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
body.menuOpen #wrapper{
padding-top:60px;
}
.overlay {
display: none;
background-color: rgba(0,0,0,0.49);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
header {
position:relative;
height: 60px;
padding:0;
}
body.menuOpen header{
position: fixed;
top:0;
width: 100%;
}
header .headerTop{
padding:inherit;
}
header .siteTitle a{
margin-left: 20px;
line-height: 60px;
}
.navDrawrBtn {
text-align: right;
}
.navDrawrBtn span {
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
display: block;
width: 60px;
height: 60px;
cursor: pointer;
}
.navDrawrBtn span::before {
font-family: FontAwesome;
content: "\f0c9";
font-size: 24px;
color: #900000;
position: absolute;
left: 0;
width: 100%;
text-align: center;
line-height: 60px;
}
body.menuOpen .navDrawrBtn span::before {
content: "\f00d";
}
.navDrawr a {
position: relative;
}
.navDrawr a::after {
position: absolute;
top: 50%;
margin-top: -10px;
right: 15px;
font-family: FontAwesome;
content: "\f054";
}
.navDrawr>ul>li {
float: none;
width: auto;
}
.navDrawr>ul>li>a {
text-align: left;
border-right: none;
border-bottom: 1px solid #900000;
}
.navDrawr .sub {
position: static;
display: block!important;
}
}
ul.imgList{}
ul.imgList::after{
display: table;
line-height: 0;
content: "";
clear:both;
}
ul.imgList li{
float: left;
width: 31.33333333%;
margin: 1%;
}
ul.imgList li .thumbnail{
background-color: #FFF;
padding: 20px;
border:solid 1px #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
ul.imgList li img{
margin-bottom:10px;
}
ul.imgList li .caption{}
ul.imgList li .title{
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
@media only screen and (max-width: 480px) {
ul.imgList li{
float: none;
width: 98%;
margin: 1%;
}
}
ステップ4：JavaScriptの記述
最後にJavaScriptを以下のように記述していきます。
$(function () {
var $nav = $('.navDrawr');
var $navBtn = $('.navDrawrBtn');
var $speed = 300;
var $navW = 270;
//サブメニューを非表示に
$nav.find('.sub').hide();
//hover時の挙動
$nav.find('li').hover(function(){
// PC表示時（ハンバーガーボタン非表示時）のみにプルダウンを限定
if ($('.navDrawrBtn span').css('display') !== 'block'){
//li要素にhoverした時に.subがあれば実行する
if( $(this).find('.sub').length && !$nav.hasClass('open') ){
$(this).find('.sub').slideDown();
}
}
},function(){
// PC表示時（ハンバーガーボタン非表示時）のみにプルダウンを限定
if ($('.navDrawrBtn span').css('display') !== 'block'){
if(!$nav.hasClass('open')) {
$(this).find('.sub').stop(true).slideUp();
}
}
});
//ドロワーに関連した記述(PCでもドロワーが動作するようにtouchend→clickに変更)
$('body').on('click','.navDrawrBtn span',function(){
drawerFunc();
});
$('body').on('click','.overlay',function(){
drawerFunc();
});
function drawerFunc(){
if( $('body').hasClass('menuOpen') ){
$('body').removeClass('menuOpen');
$nav.animate({right:-1*$navW},$speed,'swing');
$('.overlay').fadeOut($speed);
}else{
$('body').addClass('menuOpen');
if(!$('.overlay').length){
$('#wrapper').prepend('<div class="overlay"></div>');
}
$nav.animate({right:0},$speed,'swing');
$('.overlay').fadeIn($speed);
}
}
});
以上で終わりです。
基本的に上記コードのコピー・アンド・ペーストで記述すれば、問題なく動作するはずですが、場合によっては既存のクラス等とバッティングする可能性もあります。その時は任意でクラス名を付けたりして調整してみてください。
