javascript 使用一个按钮滑动菜单

Posted 2021-05-04

				<div class="col-xs-4 col-sm-4" id="sticky-menu">
					<!-- Menu item laptop to desktop -->
					<button class="hamburger hamburger--collapse hidden-xs" id="hamburger" type="button">
						<span class="hamburger-box">
						<span class="hamburger-inner"></span>
						</span>
					</button>
					<!-- Menu item phone to tablet -->
					<button class="hamburger hamburger--collapse hidden-sm hidden-md hidden-lg" id="hamburger-mb" type="button">
						<span class="hamburger-box">
						<span class="hamburger-inner"></span>
						</span>
					</button>
				</div>

<div id="mySidenav" class="sidenav">
	<ul class="menu nav navbar-nav" id="menu">
	      <li>
	            <?php /* Primary navigation */
	                  wp_nav_menu( array(
	                  'menu' => 'header-menu',
	                  'depth' => 2,
	                  'container' => false,
	                  'menu_class' => 'nav',
	                  //Process nav menu using our custom nav walker
	                  'walker' => new wp_bootstrap_navwalker())
	                  );
	            ?>
	      </li>
	</ul>
</div>

#sticky-menu button {
	float: right;
	margin-top: 55px;
}

.hamburger-scroll {
	display: flex;
	align-items: center;
	align-content: center;
	background-color: $color__brand-one !important;
	padding: 18px 12px;
	border-radius: 100%;
	position: fixed;
	margin-top: 0 !important;
	top: 30px;
	right: 50px;
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

.sticky-menu {
	position: relative;
	height: auto;
	z-index: 9997;
}

.sticky-menu-inner {
	max-width: 1140px;
	margin: 0 auto;
}

/* The side navigation menu */
.sidenav {
	height: 100%; /* 100% Full-height */
	width: 0; /* 0 width - change this with JavaScript */
	position: fixed; /* Stay in place */
	z-index: 9999; /* Stay on top */
	top: 0; /* Stay at the top */
	left: 0;
	background-color: $color__brand-one; /* Black*/
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 50px; /* Place content 60px from the top */
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	color: #818181;
	display: block;
	transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
	color: #f1f1f1;
}

#main {
	transition: margin-left 0.5s;
}

	// Animated menu desktop
	document
		.getElementById("hamburger")
		.addEventListener("click", open_close_desktop);

	var menuState = 1; // close
	function open_close_desktop() {
		if (menuState === 0) {
			menuState = 1;
			document.getElementById("mySidenav").style.width = "0";
			document.getElementById("main").style.marginLeft = "0";
		} else {
			menuState = 0;
			document.getElementById("mySidenav").style.width = "25%";
			document.getElementById("main").style.marginLeft = "25%";
		}
		console.log(menuState);
	}

	// Animated menu mobile
	document
		.getElementById("hamburger-mb")
		.addEventListener("click", open_close_mobile);

	var menuState = 1; // close
	function open_close_mobile() {
		if (menuState === 0) {
			menuState = 1;
			document.getElementById("mySidenav").style.width = "0";
		} else {
			menuState = 0;
			document.getElementById("mySidenav").style.width = "80%";
		}
		console.log(menuState);
	}