我有一个移动菜单,占据整个屏幕,我想使用淡入淡出的效果来隐藏和显示它。
问题在于我使用了不透明度来实现这个效果,但是当不透明度被设置为0时,链接虽然不可见但仍然可以点击。我尝试通过
你知道如何解决吗?
问题在于我使用了不透明度来实现这个效果,但是当不透明度被设置为0时,链接虽然不可见但仍然可以点击。我尝试通过
z-index
或display
来解决这个问题,但过渡效果不同。你知道如何解决吗?
Here is a fiddle of my code
$(window).ready(function() {
//MENU MOBILE
$('#menu-switch').click(function() {
$( this ).toggleClass('switch-on');
$('#menu-mobile').toggleClass('animated');
});
});
.content{
height:100vh;
width:100vw;
}
.cmn-toggle-switch {
z-index: 999;
display: block;
position: fixed;
top:0;
left:0;
overflow: hidden;
margin: 0;
padding: 0;
width: 60px;
height: 50px;
font-size: 0;
text-indent: -9999px;
box-shadow: none;
border-radius:0;
border: none;
cursor: pointer;
background:transparent;
}
.cmn-toggle-switch:focus {
outline: none;
}
.cmn-toggle-switch span {
display: block;
position: absolute;
top: 20px;
left: 10px;
right: 10px;
height: 5px;
border-radius: 15px;
background: black;
-webkit-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
-moz-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
-o-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.cmn-toggle-switch span::before,
.cmn-toggle-switch span::after {
position: absolute;
display: block;
left: 0;
width: 120%;
border-radius: 15px;
height: 6px;
background-color: black;
content: "";
}
.cmn-toggle-switch span::before {
top: -12px;
-webkit-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
-moz-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
-o-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.cmn-toggle-switch span::after {
bottom: -12px;
-webkit-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
-moz-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
-o-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.cmn-toggle-switch.switch-on span {
position: absolute;
top: 20px;
left: 12px;
right: 12px;
height: 4px;
background: none;
}
.cmn-toggle-switch.switch-on span::before {
opacity:1;
top:0px;
background-color:white;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.cmn-toggle-switch.switch-on span::after {
opacity:1;
bottom:-2px;
background-color:white;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
div#menu-mobile{
width:100vw;
height:100vh;
position:fixed;
top:0;
bottom:0;
opacity:0.95;
background-color: #BF4139;
-webkit-transition: opacity 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
-moz-transition: opacity 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
-o-transition: opacity 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: opacity 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
div#menu-mobile.animated{
opacity:0;
}
div#menu-mobile ul:first-child{
margin-top:60px;
}
div#menu-mobile ul{
margin-left:15%;
}
div#menu-mobile ul li{
list-style:none;
padding:8px 0px;
}
div#menu-mobile ul li a{
color:white !important;
font-size:16px;
}
div#menu-mobile ul li a:hover{
color: #001e4e !important;
font-size:16px;
}
div#menu-mobile span{
display: block;
position: absolute;
margin:0;
font-size:0;
top: 165px;
left: 1px;
right: 1px;
height: 4px;
background: white;
}
div#menu-mobile p{
font-size:18px;
color:white;
text-align:center;
}
#menu-switch {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content"></div>
<button id="menu-switch" class="cmn-toggle-switch">
<span>toggle menu</span>
</button>
<div id="menu-mobile" class="animated">
<ul>
<li class="home"><a href="/">Accueil</a></li>
<li class="publiee"><a href="/pages/publiee">Idée publiée</a></li>
<li class="en-place"><a href="/pages/enplace">Idée mise en place</a></li>
</ul>
<span>sperator</span>
<p class="name">Nom Prénom</p>
<ul>
<li class="profil"><a href="/">Mon Profil</a></li>
<li class="admin"><a href="/">Espace Administrateur</a></li>
<li class="deco"><a href="/">Déconnexion</a></li>
</ul>
</div>
opacity
和visibility
样式。 - Dave