JS，菜单按钮工作，外部链接不

时间：2017-02-14 06:54:51

标签： javascript html css drop-down-menu

＆＃13;
＆＃13; 
function transition() {
    var divtran = document.getElementById('mobile_menu');
    if (divtran.style.height == '100vh') 
       divtran.style.height = '0vh'
    else 
       divtran.style.height = '100vh'
}
＆＃13; 
/*mobile Menu */

.mobilemenu{
	z-index: 21;
	margin-top: -80px;
	margin-right: -7px;
	position:relative;
	width:50px;
	height:40px;
	border: 0px;
	-webkit-transition:background .3s;
	transition:background .3s
}

.mobilemenu span{
	height:-2px;
	top:20px;
	left:10px;
	right:10px;
	position:absolute;
}

.mobilemenu span::after,.mobilemenu span::before{
	position:absolute;
	left:0;
	height: 3px;
	width:100%;
	border-radius: 50px;
	background-color: #232323;
	content:"";
}

.mobilemenu_transition {
	background-color: transparent;
}

/*transition code persec*/
.mobilemenu_transition span{
	-webkit-transition:background 0s .3s;
	transition:background 0s .3s;
}

.mobilemenu_transition span::after,.mobilemenu_transition span::before{
	-webkit-transition-duration:.3s,.3s;
	transition-duration:.3s,.3s;
	-webkit-transition-delay:.3s,0s;
	transition-delay:.3s,0s;
}

.mobilemenu_transition span::before{
	-webkit-transition-property:top,-webkit-transform;
	transition-property:top,transform;
}

.mobilemenu_transition span::after{
	-webkit-transition-property:bottom,-webkit-transform;
	transition-property:bottom,transform;
}

.mobilemenu_transition.act{
	background-color: transparent;
}

.mobilemenu_transition.act span::before{
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}

.mobilemenu_transition.act span::after{
	-webkit-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

#mobile_menu {
	width: 100%;
	height: 0vh;
	position: absolute;
	z-index: 18;
	background-color: orange;
	overflow: hidden; 
	position: fixed;
	background-color: #f3f3f3;
	
	-webkit-transition-duration:.3s,.3s;
	transition-duration:.3s,.3s;
	-webkit-transition-delay:.3s,0s;
	transition-delay:.3s,0s;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
	<div id="mobile_menu">
		<br /><br /><br /><a href="#" onclick="transition()">bottom</a>
	</div>	
	<a href="#"><div class="_menu"><button onClick = "transition()" class="mobilemenu mobilemenu_transition"><span></span></button>
	</div></a>
		    			    			
<script>
  (function() {
    "use strict";
    var toggles = document.querySelectorAll(".mobilemenu");
    for (var i = toggles.length - 1; i >= 0; i--) {
      var toggle = toggles[i];
      toggleHandler(toggle);
    };

    function toggleHandler(toggle) {
      toggle.addEventListener( "click", function(e) {
        e.preventDefault();
        (this.classList.contains("act") === true) ? this.classList.remove("act") : this.classList.add("act");
      });
    }

  })();
</script>
			
		
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

https://github.com/Arxhtects/Css_menu_onepage

将上面的链接链接到菜单代码。我似乎无法弄清楚如何获得一个外部链接，不仅关闭单击该行后出现的菜单div，而且还删除菜单类＆＃34; act＆＃34;这样动画就会恢复到原来的状态。

获取外部链接以关闭显示的菜单div很容易。但我似乎无法让它删除课程＆＃34; act＆＃34;菜单按钮的功能。

所以基本上它会在你点击链接后离开X.我很感激任何帮助。提前谢谢你：）

我很抱歉，如果我模糊，但任何人都可以帮忙吗？

1 个答案:

答案 0 :(得分：0)

function transition() {
       var divtran = document.getElementById('mobile_menu');
       var mobileMenu = document.querySelectorAll(".mobilemenu");
       var menuOpen = false;
       if (divtran.style.height == '100vh') {
           divtran.style.height = '0vh';
           menuOpen = false;
       }
       else {
           divtran.style.height = '100vh'
           menuOpen = true;
       }
       for(var i=0;i<mobileMenu.length;i++){
          if(menuOpen) {
            mobileMenu[i].classList.add("act");
          }
          else {
            mobileMenu[i].classList.remove("act");
          }

       }
}
/*mobile Menu */

.mobilemenu{
	z-index: 21;
	margin-top: -80px;
	margin-right: -7px;
	position:relative;
	width:50px;
	height:40px;
	border: 0px;
	-webkit-transition:background .3s;
	transition:background .3s
}


.mobilemenu span{
	height:-2px;
	top:20px;
	left:10px;
	right:10px;
	position:absolute;
}

.mobilemenu span::after,.mobilemenu span::before{
	position:absolute;
	left:0;
	height: 3px;
	width:100%;
	border-radius: 50px;
	background-color: #232323;
	content:"";
}


.mobilemenu_transition {
	background-color: transparent;
}

/*transition code persec*/
.mobilemenu_transition span{
	-webkit-transition:background 0s .3s;
	transition:background 0s .3s;
}

.mobilemenu_transition span::after,.mobilemenu_transition span::before{
	-webkit-transition-duration:.3s,.3s;
	transition-duration:.3s,.3s;
	-webkit-transition-delay:.3s,0s;
	transition-delay:.3s,0s;
}

.mobilemenu_transition span::before{
	-webkit-transition-property:top,-webkit-transform;
	transition-property:top,transform;
}

.mobilemenu_transition span::after{
	-webkit-transition-property:bottom,-webkit-transform;
	transition-property:bottom,transform;
}

.mobilemenu_transition.act{
	background-color: transparent;
}

.mobilemenu_transition.act span::before{
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}

.mobilemenu_transition.act span::after{
	-webkit-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
}


#mobile_menu {
	width: 100%;
	height: 0vh;
	position: absolute;
	z-index: 18;
	background-color: orange;
	overflow: hidden; 
	position: fixed;
	background-color: #f3f3f3;
	
	-webkit-transition-duration:.3s,.3s;
	transition-duration:.3s,.3s;
	-webkit-transition-delay:.3s,0s;
	transition-delay:.3s,0s;
}
<!DOCTYPE html>
<html lang="en">
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

</head>
<body>
		<div id="mobile_menu">
			<br /><br /><br /><a href="#" onclick="transition()">bottom</a>
		</div>	
			<a href="#"><div class="_menu"><button onClick = "transition()" class="mobilemenu mobilemenu_transition"><span></span></button>
			</div></a>
			
			
			
			
		
</body>
</html>

相关问题
最新问题