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

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

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

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

【レスポンシブ対応】スマホで使えるハンバーガーメニューを実装してみた

【レスポンシブ対応】スマホで使えるハンバーガーメニューを実装してみた

ECサイトの流入の7割がスマホからの流入となった今、スマホでのUI/UXは非常に重要です。

今回はレスポンシブで対応しスマホでのUIを大きく上昇させるハンバーガーメニューの実装方法をご紹介します。スマホのような小さい画面でも操作しやすいメニューを作成することができます。

ハンバーガーメニューとは?

スマートフォンでサイトを見ていると、サイト上部によく見かける”アレ”

そう!これがハンバーガーメニューです。
詳しい由来はわかりませんが、3本線がハンバーガーに見えることからハンバーガーメニューと呼ばれるそうです。

バーガーメニューをaishipRに実装する

今回は、弊社のレスポンシブECサイト構築ASP「aishipR」をベースに実装してみますが、HTMLやCSS、JavaScriptの記述など基本的なところは、スクラッチや他のCMSでの実装にも応用できますので、必要に応じてカスタマイズしてください。

aishipRでこのハンバーガーメニューを実装するには、

1.HTMLでメニューの中身を作成する
2.CSSを記述する
3.jsを記述する

この3ステップで完了します。

デモサイトはこんな感じです。
480px以下のブラウザサイズでご覧ください。

1.HTMLでメニューの中身を作成する

aishipRのサイト管理>機能パーツ作成>新規作成でテキストを選択し
機能設定(テキスト)のコンテンツに下記HTMLを記入します。

<body>
<header>
<nav class="hum">
<ul>
<li><a href="#">Topカテゴリ</a>
<ul>
<li><a href="#">Secondカテゴリ</a>
<ul>
<li><a href="#">Thirdカテゴリ</a></li>
<li><a href="#">Thirdカテゴリ</a></li>
<li><a href="#">Thirdカテゴリ</a>
<ul>
<li><a href="#">Fourthカテゴリ</a></li>
<li><a href="#">Fourthカテゴリ</a></li>
<li><a href="#">Fourthカテゴリ</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>

記入後に「保存」を押すと、機能パーツの完成です。

次に作成した機能パーツをサイト管理>レイアウト作成の編集から
ヘッダーの上部に「機能パーツを追加」を押して設置します。

今回表示させるハンバーガーメニューはスマートフォンでのみ表示させるのでSPのみOnにしておきます。

CSSで調整する場合は、メディアクエリで481px以上の場合にdisplay:noneの設定をしてください。

2.CSSを記述する

次にCSSです。サイト管理>ユーザーCSS編集の「スマートフォン」に下記CSSを記述します。
外部のCSSファイルを読みこんだりしている場合は、そちらに記述していただいても構いません。


a.meanmenu-reveal {
	display: none;
}

.mean-container .mean-bar {
	float: left;
	width: 100%;
	position: relative;
	background: #0c1923;
	padding: 4px 0;
	min-height: 42px;
	z-index: 999999;
}

.mean-container a.meanmenu-reveal {
	width: 22px;
	height: 22px;
	padding: 13px 13px 11px 13px;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	text-indent: -9999em;
	line-height: 22px;
	font-size: 1px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
}

.mean-container a.meanmenu-reveal span {
	display: block;
	background: #fff;
	height: 3px;
	margin-top: 3px;
}

.mean-container .mean-nav {
	float: left;
	width: 100%;
	background: #0c1923;
	margin-top: 44px;
}

.mean-container .mean-nav ul {
	padding: 0;
	margin: 0;
	width: 100%;
	list-style-type: none;
}

.mean-container .mean-nav ul li {
	position: relative;
	float: left;
	width: 100%;
}

.mean-container .mean-nav ul li a {
	display: block;
	float: left;
	width: 90%;
	padding: 1em 5%;
	margin: 0;
	text-align: left;
	color: #fff;
	border-top: 1px solid #383838;
	border-top: 1px solid rgba(255,255,255,0.5);
	text-decoration: none;
	text-transform: uppercase;
}

.mean-container .mean-nav ul li li a {
	width: 80%;
	padding: 1em 10%;
	border-top: 1px solid #f1f1f1;
	border-top: 1px solid rgba(255,255,255,0.25);
	opacity: 0.75;
	filter: alpha(opacity=75);
	text-shadow: none !important;
	visibility: visible;
}

.mean-container .mean-nav ul li.mean-last a {
	border-bottom: none;
	margin-bottom: 0;
}

.mean-container .mean-nav ul li li li a {
	width: 70%;
	padding: 1em 15%;
}

.mean-container .mean-nav ul li li li li a {
	width: 60%;
	padding: 1em 20%;
}

.mean-container .mean-nav ul li li li li li a {
	width: 50%;
	padding: 1em 25%;
}

.mean-container .mean-nav ul li a:hover {
	background: #252525;
	background: rgba(255,255,255,0.1);
}

.mean-container .mean-nav ul li a.mean-expand {
	margin-top: 1px;
	width: 26px;
	height: 25px;
	padding: 12px !important;
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	font-weight: 700;
	background: rgba(255,255,255,0.1);
	border: none !important;
	border-left: 1px solid rgba(255,255,255,0.4) !important;
	border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
	background: rgba(0,0,0,0.9);
}

.mean-container .mean-push {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	clear: both;
}

.mean-nav .wrapper {
	width: 100%;
	padding: 0;
	margin: 0;
}

/* Fix for box sizing on Foundation Framework etc. */
.mean-container .mean-bar, .mean-container .mean-bar * {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}


.mean-remove {
	display: none !important;
}

3.JavaScriptを記述する

最後はhead内に下記jsコードを記述します。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery.meanmenu.js"></script>
<script>
$(document).ready(function() {
$('nav.hum').meanmenu();
});
</script>

もう1つjsをサイト管理>ユーザーJSに記述します。
ここは外部読込しているjsファイルに記述しても構いません。


(function ($) {
	"use strict";
		$.fn.meanmenu = function (options) {
			var defaults = {
			meanMenuTarget: jQuery(this), 
			meanMenuContainer: 'body', 
			meanMenuClose: "X", 
			meanMenuCloseSize: "18px", 
			meanMenuOpen: "<span /><span /><span />", 
			meanRevealPosition: "right", 
			meanRevealPositionDistance: "0", 
			meanRevealColour: "", 
			meanScreenWidth: "480", 
			meanNavPush: "", 
			meanShowChildren: true, 
			meanExpandableChildren: true, 
			meanExpand: "+", 
			meanContract: "-", 
			meanRemoveAttrs: false, 
			onePage: false, 
			meanDisplay: "block", 
			removeElements: "" 
			};
			options = $.extend(defaults, options);
			var currentWidth = window.innerWidth || document.documentElement.clientWidth;
			return this.each(function () {
			var meanMenu = options.meanMenuTarget;
			var meanContainer = options.meanMenuContainer;
			var meanMenuClose = options.meanMenuClose;
			var meanMenuCloseSize = options.meanMenuCloseSize;
			var meanMenuOpen = options.meanMenuOpen;
			var meanRevealPosition = options.meanRevealPosition;
			var meanRevealPositionDistance = options.meanRevealPositionDistance;
			var meanRevealColour = options.meanRevealColour;
			var meanScreenWidth = options.meanScreenWidth;
			var meanNavPush = options.meanNavPush;
			var meanRevealClass = ".meanmenu-reveal";
			var meanShowChildren = options.meanShowChildren;
			var meanExpandableChildren = options.meanExpandableChildren;
			var meanExpand = options.meanExpand;
			var meanContract = options.meanContract;
			var meanRemoveAttrs = options.meanRemoveAttrs;
			var onePage = options.onePage;
			var meanDisplay = options.meanDisplay;
			var removeElements = options.removeElements;
			var isMobile = false;
		if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/Android/i)) || (navigator.userAgent.match(/Blackberry/i)) || (navigator.userAgent.match(/Windows Phone/i)) ) {
			isMobile = true;
			}
			if ( (navigator.userAgent.match(/MSIE 8/i)) || (navigator.userAgent.match(/MSIE 7/i)) ) {
			jQuery('html').css("overflow-y" , "scroll");
			}
			var meanRevealPos = "";
			var meanCentered = function() {
			if (meanRevealPosition === "center") {
			var newWidth = window.innerWidth || document.documentElement.clientWidth;
			var meanCenter = ( (newWidth/2)-22 )+"px";
			meanRevealPos = "left:" + meanCenter + ";right:auto;";
			if (!isMobile) {
			jQuery('.meanmenu-reveal').css("left",meanCenter);
			} else {
			jQuery('.meanmenu-reveal').animate({
			left: meanCenter
			});
			}
			}
			};
			var menuOn = false;
			var meanMenuExist = false;
			if (meanRevealPosition === "right") {
			meanRevealPos = "right:" + meanRevealPositionDistance + ";left:auto;";
			}
			if (meanRevealPosition === "left") {
			meanRevealPos = "left:" + meanRevealPositionDistance + ";right:auto;";
			}
			meanCentered();
			var $navreveal = "";
			var meanInner = function() {
			if (jQuery($navreveal).is(".meanmenu-reveal.meanclose")) {
			$navreveal.html(meanMenuClose);
			} else {
			$navreveal.html(meanMenuOpen);
			}
			};
			var meanOriginal = function() {
			jQuery('.mean-bar,.mean-push').remove();
			jQuery(meanContainer).removeClass("mean-container");
			jQuery(meanMenu).css('display', meanDisplay);
		   menuOn = false;
			meanMenuExist = false;
			jQuery(removeElements).removeClass('mean-remove');
			};
			var showMeanMenu = function() {
			var meanStyles = "background:"+meanRevealColour+";color:"+meanRevealColour+";"+meanRevealPos;
			if (currentWidth <= meanScreenWidth) {
			jQuery(removeElements).addClass('mean-remove');
			meanMenuExist = true;
			jQuery(meanContainer).addClass("mean-container");
			jQuery('.mean-container').prepend('<div class="mean-bar"><a href="#nav" class="meanmenu-reveal" style="'+meanStyles+'">Show Navigation</a><nav class="mean-nav"></nav></div>');
			var meanMenuContents = jQuery(meanMenu).html();
			jQuery('.mean-nav').html(meanMenuContents);
			if(meanRemoveAttrs) {
			jQuery('nav.mean-nav ul, nav.mean-nav ul *').each(function() {
			if (jQuery(this).is('.mean-remove')) {
		jQuery(this).attr('class', 'mean-remove');
			} else {
		jQuery(this).removeAttr("class");
			}
				jQuery(this).removeAttr("id");
					});
				}
				jQuery(meanMenu).before('<div class="mean-push" />');
				jQuery('.mean-push').css("margin-top",meanNavPush);
				jQuery(meanMenu).hide();
				jQuery(".meanmenu-reveal").show();
				jQuery(meanRevealClass).html(meanMenuOpen);
		    	$navreveal = jQuery(meanRevealClass);
			jQuery('.mean-nav ul').hide();
				if(meanShowChildren) {
				// allow expandable sub nav(s)
				if(meanExpandableChildren){
				jQuery('.mean-nav ul ul').each(function() {
				if(jQuery(this).children().length){
		jQuery(this,'li:first').parent().append('<a class="mean-expand" href="#" style="font-size: '+ meanMenuCloseSize +'">'+ meanExpand +'</a>');
		}
		});
		jQuery('.mean-expand').on("click",function(e){
		e.preventDefault();
		if (jQuery(this).hasClass("mean-clicked")) {
		jQuery(this).text(meanExpand);
		jQuery(this).prev('ul').slideUp(300, function(){});
		} else {
		jQuery(this).text(meanContract);
		jQuery(this).prev('ul').slideDown(300, function(){});
		}
		jQuery(this).toggleClass("mean-clicked");
		});
    	} else {
		jQuery('.mean-nav ul ul').show();
		}
		} else {
		jQuery('.mean-nav ul ul').hide();
		}
		jQuery('.mean-nav ul li').last().addClass('mean-last');
		$navreveal.removeClass("meanclose");
		jQuery($navreveal).click(function(e){
		e.preventDefault();
		if( menuOn === false ) {
		$navreveal.css("text-align", "center");
		$navreveal.css("text-indent", "0");
		$navreveal.css("font-size", meanMenuCloseSize);
		jQuery('.mean-nav ul:first').slideDown();
		menuOn = true;
		} else {
    	jQuery('.mean-nav ul:first').slideUp();
		menuOn = false;
		}
		$navreveal.toggleClass("meanclose");
		meanInner();
		jQuery(removeElements).addClass('mean-remove');
		});
		if ( onePage ) {
		jQuery('.mean-nav ul > li > a:first-child').on( "click" , function () {
		jQuery('.mean-nav ul:first').slideUp();
		menuOn = false;
		jQuery($navreveal).toggleClass("meanclose").html(meanMenuOpen);
		});
		}
		} else {
		meanOriginal();
		}
		};
		if (!isMobile) {
		jQuery(window).resize(function () {
		currentWidth = window.innerWidth || document.documentElement.clientWidth;
		if (currentWidth > meanScreenWidth) {
		meanOriginal();
		} else {
		meanOriginal();
		}
		if (currentWidth <= meanScreenWidth) {
		showMeanMenu();
		meanCentered();
		} else {
		meanOriginal();
		}
		});
		}
		jQuery(window).resize(function () {
		currentWidth = window.innerWidth || document.documentElement.clientWidth;
		if (!isMobile) {
		meanOriginal();
		if (currentWidth <= meanScreenWidth) {
		showMeanMenu();
		meanCentered();
		}
		} else {
		meanCentered();
		if (currentWidth <= meanScreenWidth) {
		if (meanMenuExist === false) {
		showMeanMenu();
		}
		} else {
		meanOriginal();
		}
		}
		});
			showMeanMenu();
		});
	};
})(jQuery);

終わりに

CSSファイルやJSファイルを任意の場所に設置して読み込ますことでも実装は可能ですが、今回はaishipR上での作業のみで実装することを想定したので、必要なコードを記入する方法で今回は実装しました。

CSSを編集することでデザインも変更できますので好みのデザインにカスタマイズしてみてください。

簡単に実装できますので、是非トライしてみてください。

本田

”スマホで売れる”ためには必須の「レスポンシブ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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+