I need help with a small menu-list that should expand when the mouse is nearby. By default, the menu is aligned to the right, but on hover, every other item shifts to the left to accommodate the increased height (check out the JSFiddle).
ul {
font-size: 12px;
transition: font-size ease 0.4s 0.4s;
line-height: 12px;
text-align: right;
padding: 50px;
width: 500px;
list-style-type: none;
}
ul:hover {
font-size: 24px;
}
li {
height: 12px;
}
li a {
display: block;
text-decoration: none;
transition: transform ease 0.8s;
text-align: right;
}
.container:hover ul li:nth-child(even) a{
transform: translateX(100%);
text-align: left;
}<div class="container">
<ul>
<li><a href="#">Some link</a></li>
<li><a href="#">Some other link</a></li>
<li><a href="#">another</a></li>
<li><a href="#">this is the last ling</a></li>
</ul>
</div>The idea is working, but I still need to fine-tune the animation. The issue I'm facing is with aligning the items in the middle without causing them to jump to the left-aligned position before moving. I want them to start at their current location.
To tackle this problem, I believe I need a way to keep the items right-aligned and move them to the right by their width using
transform: translateX(self:width);