菜单在重新调整窗口大小时移动

Menu shifting upon window re-sizing

本文关键字：窗口 小时 移动 调整 新调整 菜单      更新时间：2023-09-26

此菜单应位于网站的中心，并应对浏览器窗口大小的调整。现在它在中心，动画工作。但是每当我尝试使菜单响应，以便在我调整大小时它会保留在网站的中间时，动画就会停止。请帮忙..

脚本 

$(".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")
});

我还想提一下，您的菜单实际上不在屏幕右侧，用户实际上可以滚动到该位置。将整个东西包装在一个盒子里并隐藏其溢出，以确保这不是问题。

相关文章：