HTML:
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1"onclick="checklist(this)"><button onclick="myFunction()">AA</button></li>
<li id="item2"><button onclick="myFunction2()">A </button></li>
<li id="item3">B </li>
<li id="item4">C </li>
<li id="item5">D </li>
<li id="item6">E </li>
<li id="item7">F </li>
</ul>
</div>
CSS:
lu, li{
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu{
width:150px;
height: 350px;
margin:0 auto;
}
.menu li{
position: relative;
top:150px;
bottom: 0;
right: 0;
margin: auto;
border-style:none;
}
//animation
#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;
}
I want to animate this menu which is centered in the middle of my website, to go to the ultimate left in this form / ,it works however when i resize the window the menu isn't responsive, it doesn't remain in the middle of the screen. Any help?
I don't know whether I understood your question correctly,
Please checkout this style and let me know this satisfy your needs.
lu, li{
list-style-type: none;
font-size: 1.5em;
text-align: center;
border-style: none;
}
.menu{
width:150px;
height: 350px;
margin:0 auto;
}
.menu li{
position: relative;
top:150px;
margin: 0 auto;
border-style:none;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.