【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

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

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

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

さて、今回はスマホサイトでもよく採用されているドロワーメニューの設置方法を、レスポンシブ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サイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+