[英]Menu shifting upon window re-sizing
此菜单应放置在网站的中心,以适应浏览器窗口大小的调整。 现在它位于中间,动画就可以了。 但是,每当我尝试使菜单响应时,以便在我调整大小时将其保留在网站中间,动画将停止。 任何帮助请..
脚本
$(".menu").on("click", function () {
$(".menu").addClass('permahover');
});
CSS
li {
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 180px;
text-align: right;
border-style: none;
}
.menu {
width: 150px;
height: 350px;
}
.menu li {
position: relative;
top: 150px;
bottom: 0;
left: 690px;
right: 0;
margin: auto;
border-style: none;
}
#item7 {
transition: opacity .8s, left .8s ease-out;
-moz-transition: opacity .8s, left .8s ease-out;
-webkit-transition: opacity .8s, left .8s ease-out;
-o-transition: opacity .8s, left .8s ease-out;
}
#item6 {
transition: opacity 1s, left 1s ease-out;
-moz-transition: opacity 1s, left 1s ease-out;
-webkit-transition: opacity 1s, left 1s ease-out;
-o-transition: opacity 1s, left 1s ease-out;
}
#item5 {
transition: opacity 1.2s, left 1.2s ease-out;
-moz-transition: opacity 1.2s, left 1.2s ease-out;
-webkit-transition: opacity 1.2s, left 1.2s ease-out;
-o-transition: opacity 1.2s, left 1.2s ease-out;
}
#item4 {
transition: opacity 1.4s, left 1.4s ease-out;
-moz-transition: opacity 1.4s, left 1.4s ease-out;
-webkit-transition: opacity 1.4s, left 1.4s ease-out;
-o-transition: opacity 1.4s, left 1.4s ease-out;
}
#item3 {
transition: opacity 1.6s, left 1.6s ease-out;
-moz-transition: opacity 1.6s, left 1.6s ease-out;
-webkit-transition: opacity 1.6s, left 1.6s ease-out;
-o-transition: opacity 1.6s, left 1.6s ease-out;
}
#item2 {
transition: opacity 1.8s, left 1.8s ease-out;
-moz-transition: opacity 1.8s, left 1.8s ease-out;
-webkit-transition: opacity 1.8s, left 1.8s ease-out;
-o-transition: opacity 1.8s, left 1.8s ease-out;
}
#item1 {
transition: opacity 2s, left 2s ease-out;
-moz-transition: opacity 2s, left 2s ease-out;
-webkit-transition: opacity 2s, left 2s ease-out;
-o-transition: opacity 2s, left 2s ease-out;
}
.permahover li {
opacity: 1;
left: 10%;
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1" onclick="checklist(this)">
<button onclick="myFunction()">a</button></li>
<li id="item2">
<button onclick="myFunction2()">b</button></li>
<li id="item3">
<button>c</button>
</li>
<li id="item4">
<button>d</button>
</li>
<li id="item5">
<button>e</button>
</li>
<li id="item6">
<button>f</button>
</li>
<li id="item7">
<button>g</button>
</li>
</ul>
</div>
$(".menu").on("click", function () { $(".menu").addClass('permahover'); });
li { list-style-type: none; font-size: 1.5em; height: 40px; width: 180px; text-align: right; border-style: none; } .menu { width: 150px; height: 350px; } .menu li { position: relative; top: 150px; bottom: 0; left: 690px; right: 0; margin: auto; border-style: none; } #item7 { transition: opacity .8s, left .8s ease-out; -moz-transition: opacity .8s, left .8s ease-out; -webkit-transition: opacity .8s, left .8s ease-out; -o-transition: opacity .8s, left .8s ease-out; } #item6 { transition: opacity 1s, left 1s ease-out; -moz-transition: opacity 1s, left 1s ease-out; -webkit-transition: opacity 1s, left 1s ease-out; -o-transition: opacity 1s, left 1s ease-out; } #item5 { transition: opacity 1.2s, left 1.2s ease-out; -moz-transition: opacity 1.2s, left 1.2s ease-out; -webkit-transition: opacity 1.2s, left 1.2s ease-out; -o-transition: opacity 1.2s, left 1.2s ease-out; } #item4 { transition: opacity 1.4s, left 1.4s ease-out; -moz-transition: opacity 1.4s, left 1.4s ease-out; -webkit-transition: opacity 1.4s, left 1.4s ease-out; -o-transition: opacity 1.4s, left 1.4s ease-out; } #item3 { transition: opacity 1.6s, left 1.6s ease-out; -moz-transition: opacity 1.6s, left 1.6s ease-out; -webkit-transition: opacity 1.6s, left 1.6s ease-out; -o-transition: opacity 1.6s, left 1.6s ease-out; } #item2 { transition: opacity 1.8s, left 1.8s ease-out; -moz-transition: opacity 1.8s, left 1.8s ease-out; -webkit-transition: opacity 1.8s, left 1.8s ease-out; -o-transition: opacity 1.8s, left 1.8s ease-out; } #item1 { transition: opacity 2s, left 2s ease-out; -moz-transition: opacity 2s, left 2s ease-out; -webkit-transition: opacity 2s, left 2s ease-out; -o-transition: opacity 2s, left 2s ease-out; } .permahover li { opacity: 1; left: 10%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="menu" class="menu"> <ul class="headlines"> <li id="item1" onclick="checklist(this)"> <button onclick="myFunction()">a</button></li> <li id="item2"> <button onclick="myFunction2()">b</button></li> <li id="item3"> <button>c</button> </li> <li id="item4"> <button>d</button> </li> <li id="item5"> <button>e</button> </li> <li id="item6"> <button>f</button> </li> <li id="item7"> <button>g</button> </li> </ul> </div>
您所需要的只是在调整窗口大小时删除类。 请尝试以下操作:
$(window).resize(function(){
$(".menu").removeClass("permahover")
});
我还想提及一下,您的菜单实际上不在屏幕右侧,并且用户实际上可以滚动到该位置。 将整个内容包装到一个盒子中,并隐藏其溢出内容以确保这不是问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.