调整窗口大小时切换菜单

Question

This menu should be positioned in the center of the website and cope with the resizing of the browser's window. Now it's in the center and the animation works. But whenever i try to make the menu responsive so it'll remain in the middle of the website when i resize, the animation stops. Any help please..

Scripting

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

Answer 1

All you need is to remove your class on window resize. Try the following:

$(window).resize(function(){ 
    $(".menu").removeClass("permahover")
});

I would also like to mention that your menu is actually off screen to the right, and the user can actually scroll to that position. Wrap this entire thing into a box and hide its overflow to make sure this isn not an issue.