ECサイト構築・リニューアルならクラウド型ECサイト構築ASPサービスサイトへ
資料請求
TOP

CATEGORY

SERVICE

レスポンシブサイトで便利なドロワーメニューの設置方法

レスポンシブサイトで便利なドロワーメニューの設置方法

皆さんこんにちは、サポート部の山本です。夏の暑さも一段落し、朝晩の気温も下がり過ごしやすくなってきましたね。

さて、今回はスマホサイトでもよく採用されているドロワーメニューの設置方法を、レスポンシブwebデザインに対応した形でご案内します。

目次

実装サンプル

スマホでは以下のように動作します。ハンバーガーメニューをタップすると、中に入っているメニューが現れます。

smp

PCサイズになると下図のように大項目のメニューが横並びになり、その下にサブメニューが表示されるような実装をしていきます。

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);
		}
	}
});

以上で終わりです。

デモサイト

基本的に上記コードのコピー・アンド・ペーストで記述すれば、問題なく動作するはずですが、場合によっては既存のクラス等とバッティングする可能性もあります。その時は任意でクラス名を付けたりして調整してみてください。

                   
商品の販売に“夢中”になれる
クラウド型ECサイト構築ASP

ECサイト構築、リニューアルを2000社以上支援してきた知見から
ECの専門家として御社のEC事業成長をサポートします。

  • 導入実績2000社以上


    導入実績

  • 注文単価増加率114%

    導入1年後の
    注文単価
    増加率

  • 売上成長率128%

    導入1年後の
    売上成長率

  • EC支援歴20年


    EC支援歴

お問い合わせ 資料請求
         

レスポンシブWebデザインカテゴリの最新記事