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に記述します。
ここは外部読込しているｊｓファイルに記述しても構いません。
(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を編集することでデザインも変更できますので好みのデザインにカスタマイズしてみてください。
簡単に実装できますので、是非トライしてみてください。
本田
