How to make a smooth transition through the menu?

Hello, tell me how to make a smooth transition between menu items 1 to 1 on this site .
Tried here so, did not help :(
.menu li:hover{
border-left-color: #359bbf;
transition: 0.5 s;
July 8th 19 at 11:38
3 answers
July 8th 19 at 11:40
It's called lavalamp menu.
Here there are examples with vertical menu.
July 8th 19 at 11:42
I understand the need rim which rides in the dropdown. It is done, there is generally not after. If you examine the code - there is a span, which is absolute with respect to all the fallen of the block relative actually (I'm not worn out with an explanation for a person who understands more or less everything in the layout is so clear, so if that is not clear - ask in the comments). Logic - when you hover over a particular item to know its height and its distance from the start of the parent element (using jquery this is done in 2 accounts at all). Then the task is simply to shift the desired number of px your runner. On the move how to calculate the distance from the top having the height and the distance of the element from the beginning of the parent - I honestly the formula is not to think, as want to sleep. Do your own that you think is well or to cut all the menu items of the same height and drop the item to the number of px from top + 3px there well (the number of " there well," know yourself, just slide your slider to the first number of px from the top {I mean distance from the whole block that is the dropdown to the item brought} and then later using the inspector in the middle of your item and do the math on how much they lowered). The logic of this. Do it yourself, it will be interesting, and I sleep. It does not - write. Gash on codepen or something where the skins are referring to here, but tomorrow or when your free time will be.

Link to the script from Chet looks very dumb, ugly blend generally there.
July 8th 19 at 11:44
Not sure what you need but an example

Find more questions by tags HTMLCSSjQuery