Bootstrapのナビゲーションでoffcanvasにする時のメモ

んー。通常のnavbarのときにサイドからメニューを出す際に、offcanvasを使ってできないかなと思って、サンプルのoffcanvasから代用して諸々作り変えた感じです。

説明とかはしてないのでご了承ください。

HTML

基本的に1ソースでスマホからPCまでのレイアウトを作成してるので、ちょっと無茶な部分もあるかもしれません。

<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container row-offcanvas row-offcanvas-right">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="offcanvas">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="sr-only">MENU</span>
			</button>
			<a href="#" class="navbar-brand">LOGO</a>
		</div>
		<!-- /.navbar-header -->

		<div class="sidebar-offcanvas" id="sidebar" role="navigation">
			<div class="visible-xs offcanvas-header">MENU</div>
			<ul class="nav navbar-nav gnavi">
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
			</ul>
			<div class="navbar-position"><!-- PC用の調整用タグ -->
				<ul class="nav navbar-nav nav-head">
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
				</ul>
				<ul class="nav-info">
					<li class="tel-box">
						<span class="tel">012-345-6789</span>
					</li>
					<li class="infobox">
						<p class="text-1">テキスト</p>
						<p class="text-2">テキスト</p>
						<p class="text-3">テキスト</p>
					</li>
				</ul>
				
				<!-- 独自でCSS作ってあります。ほぼWordPressのtwentyfifteenのCSSから内容を把握できます。URLからアイコン呼び出しとか -->
				<ul class="social social-icon">
					<li><a href="https://www.facebook.com/" target="_blank"><span class="sr-only">facebook</span></a></li>
					<li><a href="https://www.twitter.com/" target="_blank"><span class="sr-only">twitter</span></a></li>
					<li><a href="https://www.instagram.com/" target="_blank"><span class="sr-only">instagram</span></a></li>
				</ul>
				<button type="button" class="navbar-close" data-toggle="offcanvas">
					<span class="btn-close">CLOSE</span>
				</button>
			</div>
		</div>
		<!-- /.collapse.navbar-collapse -->
	</div>
</nav>

---

CSS(Scss)

Scssを使用しています。

@media screen and (max-width: $screen-xs-max) {
	.row-offcanvas {
		position: relative;
		transition: transform .25s ease-out;
		&-right {
			right: 0;
		}
		&-left {
			left: 0;
		}
		
		// Toggle Button
		.navbar-toggle {
			.icon-bar {
				transition: transform .5s ease-out;
			}
		}
		&.active {
			.navbar-toggle {
				padding-top: 14px;
				.icon-bar {
					&:nth-child(1) {
						margin-bottom: -2px;
						transform: rotateZ(45deg);
					}
					&:nth-child(2) {
						margin-top: 0;
						margin-bottom: 0;
						height: 0;
						opacity: 0;
					}
					&:nth-child(3) {
						margin-top: -2px;
						transform: rotateZ(-45deg);
					}
				}
				.sr-only {
					margin-top: 11px;
				}
			}
		}
	}

	.row-offcanvas-right {
		.sidebar-offcanvas {
			right: -240px;
			border-left: 1px solid #454545;
		}
		&.active {
			transform: translateX(-240px);
		}
	}

	.row-offcanvas-left {
		.sidebar-offcanvas {
			left: -240px;
			border-right: 1px solid #454545;
		}
		&.active {
			transform: translateX(240px);
		}
	}

	.offcanvas-header {
		cursor: default;
		position: absolute;
		top: 0;
		z-index: 5;
		width: 100%;
		height: 50px;
		padding: 0 15px;
		line-height: 50px;
		font-weight: bold;
		font-size: 114%;
		color: #fff;
		letter-spacing: 5px;
		text-align: center;
		text-shadow: 0 -1px 0 rgba(#000, 1);
		background-color: #e3e3e3;
		border-bottom: 1px solid #fff;
		user-select: none;
	}
	.sidebar-offcanvas {
		position: absolute;
		top: 0;
		width: 240px;
		height: 100%;
		height: 100vh;
		padding-top: 50px;
		padding-bottom: 100px;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		background-color: #f0f0f0;
		.navbar-nav {
			margin-left: 0;
			margin-right: 0;
		}
	}
	.offcanvas-blank {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1001;
		width: 100%;
		height: 100%;
		height: 100vh;
		background-color: rgba(#000, .7);
	}
}

JavaScript(jQuery)

jQuery

$('[data-toggle="offcanvas"]').on('click', function() {
	$('.row-offcanvas').toggleClass('active');

	// .row-offcanvasがactiveになったらマスクレイヤーを追加する
	if ($('.row-offcanvas').hasClass('active'))
	{
		$('<div/>', {
			'class': 'offcanvas-blank',
			'data-toggle': 'offcanvas',
			click: function() {
				$('.row-offcanvas').removeClass('active');
				$(this).remove();
			}
		}).appendTo('body');
	}
	else
	{
		$('.offcanvas-blank').remove();
	}
});