The menu needs to be centered on the website and adjust to the browser window resizing. Currently, it's positioned in the center and the animation is working fine. However, when I attempt to make the menu responsive so that it stays centered when resized, the animation stops. Any assistance would be greatly appreciated.
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;
}
... (CSS code continues) ...
.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>
... (HTML code continues) ...
</ul>
</div>