scss ハンバーガーメニュー+グランドナビ

Posted 2021-05-17

ハンバーガーメニュー＋グランドナビ
-----------------


A [Pen](https://codepen.io/anonie/pen/KKPdOzN) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/KKPdOzN/license).

				<div class="l-gnav">
					<label for="gnav-trigger" class="berger-menu-wrap">
						<div class="berger-menu">
							<div class="berger-menu__item berger-menu_item01"></div>
							<div class="berger-menu__item berger-menu_item02"></div>
							<div class="berger-menu__item berger-menu_item03"></div>
						</div>
					</label>
					<input type="checkbox" id="gnav-trigger" />
					<div class="gnav-contents-wrap">
						<div class="gnav-contents__inner">

						</div>
					</div>
				</div>

$(function() {
	$('.berger-menu-wrap').click(function() {
		if($(this).find('.berger-menu').hasClass('is_active')){
			 $(this).find('.berger-menu').removeClass('is_active');
		} else {
			 $(this).find('.berger-menu').addClass('is_active');
		}
	});	
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

$color-main: #168893;
$color-deep: #01293f;
$color-light: #efefef;




/**** trigger ****/
.berger-menu-wrap {
	z-index: 10001;
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	display: inline-block;
	width: 35px;
	&:hover {
		cursor: pointer;
	}
}
.berger-menu {
	display: flex;
	flex-direction: column;
	&__item {
		transition: 0.2s;
		content: "";
		width: 100%;
		height: 3px;
		border-radius: 1.5px;
		margin-bottom: 7.5px;
		background: $color-main;
	}
}
.berger-menu_item01 {
	top: 0;
		.berger-menu.is_active & {
			transform: translateY(10px) rotate(225deg);
			transition: 0.2s;
			background: #fff;
		}
}
.berger-menu_item02 {
	top: 5px;
		.berger-menu.is_active & {
			opacity: 0;
		}
}
.berger-menu_item03 {
	top: 10px;
	margin-bottom: 0;
		.berger-menu.is_active & {
		/* 	transform: translateY(-12.5px) rotate(-45deg); */
			transform: translateY(-10px) rotate(-45deg);
			transition: 0.2s;
			background: #fff;
		}
}
[id="gnav-trigger"] { /* check box */
	display: none;
}
/**** contents ****/
.gnav-contents-wrap {
	position: absolute;
	top: 0;
	right: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: .8s;
}
input[id="gnav-trigger"]:checked ~ .gnav-contents-wrap {
	top: 0;
	height: 100vh;
	width: 100vw;
	opacity: 1;
	background:$color-main;
	color: #fff;
}