javascript 170224 spメニューは特别な动きしなけりゃcommon.jsの记载で间に合う

Posted 2021-05-04

/* .fixbtns */
.fixbtns {
	position: fixed;
	right: 5px;
	top: 5px;
	z-index: 99;
	ul {
		li {
			position: relative;
			z-index: 99;
			a {
				display: table-cell;
				vertical-align: middle;
				width: 75px;
				height: 75px;
				color: #fff;
				border: 2px solid $darkredColor;
				text-align: center;
				text-decoration: none;
				@include hoveranime_slow_h();
				@include mq(sp) {
					width: 46px;
					height: 46px;
				}
				i {
					color: #fff;
					@include fsz(30);
					@include mq(sp) {
						@include fsz(20);
					}
				}
			}
			&.btn_menu {
				a {
					background: #fff;
					.ic {
						display: inline-block;
						vertical-align: middle;
						position: relative;
						width: 30px;
						height: 22px;
						margin-bottom: 6px;
						@include mq(sp) {
							width: 16px;
							height: 13px;
							margin-bottom: 0;
						}
						> span {
							display: inline-block;
							vertical-align: middle;
							position: absolute;
							left: 0;
							height: 3px;
							width: 100%;
							background: $baseColor;
							@include hoveranime_slow_h;
							&:nth-of-type(1) {
								top: 0;
							}
							&:nth-of-type(2) {
								top: 9px;
								@include mq(sp) {
									top: 5px;
								}
							}
							&:nth-of-type(3) {
								bottom: 0;
							}
						}
					}
					.txt {
						@include fsz(12);
						line-height: 1;
						color: $baseColor;
						font-weight: bold;
					}
				}
			}
		}
	}
}

body.fix-active {
	position: fixed;
	width: 100%;
	top: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	.fixbtns {
		z-index: 101;
		ul li {
			&.btn_menu {
				a {
					background: transparent;
					.ic > span {
						&:nth-of-type(1) {
							-webkit-transform: translateY(10px) rotate(-45deg);
							-ms-transform: translateY(10px) rotate(-45deg);
							transform: translateY(10px) rotate(-45deg);
							@include mq(sp) {
								-webkit-transform: translateY(5px) rotate(-45deg);
								-ms-transform: translateY(5px) rotate(-45deg);
								transform: translateY(5px) rotate(-45deg);
							}
						}
						&:nth-of-type(2) {
							opacity: 0;
						}
						&:nth-of-type(3) {
							-webkit-transform: translateY(-10px) rotate(45deg);
							-ms-transform: translateY(-10px) rotate(45deg);
							transform: translateY(-10px) rotate(45deg);
							@include mq(sp) {
								-webkit-transform: translateY(-5px) rotate(45deg);
								-ms-transform: translateY(-5px) rotate(45deg);
								transform: translateY(-5px) rotate(45deg);
							}
						}
						background: $baseColor;
					}
				}
			}
			&.btn_search, &.btn_instagram, &.btn_facebook {
				display: none;
			}
		}
	}
}

/* #fixmenu */
#fixmenu {
	display: none;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	padding: 50px 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	ul {
		li {
			border-bottom: 1px solid #eee;
			a {
				display: block;
				@include fsz(14);
				color: $baseColor;
				text-decoration: none !important;
				padding: 0.6em 1em;
				position: relative;
				i {
					margin-right: 0.5em;
				}
			}
		}
	}
	.box_tel {
		text-align: center;
		margin-top: 20px;
		h1 {
			@include fsz(16);
			color: $baseColor;
			font-weight: normal;
			margin-bottom: 10px;
		}
		.telephone {
			color: $baseColor;
			.txt_tel {
				@include fsz(20);
				margin-right: 5px;
			}
			.tel {
				@include fsz(25);
			}
		}
	}
}

<div id="fixmenu">
	<ul class="drawer-menu">
		<li><a href="#lnk_top"><i class="fa fa-caret-right" aria-hidden="true"></i>TOP</a></li>
		<li><a href="#lnk_location"><i class="fa fa-caret-right" aria-hidden="true"></i>LOCATION</a></li>
		<li><a href="#lnk_access"><i class="fa fa-caret-right" aria-hidden="true"></i>ACCESS</a></li>
		<li><a href="#lnk_rooms"><i class="fa fa-caret-right" aria-hidden="true"></i>ROOMS</a></li>
		<li><a href="#lnk_bkf"><i class="fa fa-caret-right" aria-hidden="true"></i>BREAKFAST</a></li>
		<li><a href="#lnk_fac"><i class="fa fa-caret-right" aria-hidden="true"></i>FACILITIES</a></li>
		<li><a href="http://www.489pro.com/asp/489/menu.asp?id=20000075&kid=00109&ty=ser&lan=ENG"><i class="fa fa-caret-right" aria-hidden="true"></i>BOOK NOW</a></li>
	</ul>
	<div class="box_tel">
		<h1>〒380-0823 長野県 長野市 南千歳 2-8-5</h1>
		<div class="telephone">
			<span class="txt_tel">Tel.</span>
			<a class="tel" href="tel:[phone]">[phone]</a>
		</div>
	</div>
</div><!-- /#fixmenu -->

<div class="fixbtns view_sp">
	<ul>
		<li class="btn_menu">
			<a id="menuopen" href="javascript:void(0);">
				<span class="ic"><span></span><span></span><span></span></span>
				<span class="txt">Menu</span>
			</a>
		</li>
	</ul>
</div><!-- /.fixbtns -->

$(function(){
	// menu sp
	$('#menuopen').on('click', function() {
		if($('body').hasClass('fix-active')) {
			$('body').removeClass('fix-active');
			$('#fixmenu').fadeOut();
		} else {
			$('#fixmenu').fadeIn();
			$('body').addClass('fix-active');
		}
	});

	$('.drawer-menu li a').on('click', function() {
		setTimeout(function(){
			$('body').removeClass('fix-active');
			$('#fixmenu').fadeOut();
		},500);
	});
});