'Minimal Trois' Animation for Menu Items in Sidebar

[riugn557]

Hi there,

I have a menu in my sidebar here (https://thelanguagesherpa.com), at the moment with only one item, ‘Russian’.

Do you know how I can make the items in this menu have the ‘Minimal Trois’ Animation when hovered over?

Thank you!
LS

[thai]

Hi There,

Do you have a demo about the Minimal Trois animation?

While you can try with this CSS:

ul#menu-resource-guide-sidebar li {
    display: block;
    margin: 0;
}
ul#menu-resource-guide-sidebar li a {
    width: 100%;
    display: block;
    margin: 0;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    overflow: hidden;
    background: #2098D1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
ul#menu-resource-guide-sidebar li a:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e1e1e1;
    border-radius: 100%;
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
ul#menu-resource-guide-sidebar li:hover a {
    color: #fff;
}
ul#menu-resource-guide-sidebar li:hover a:before {
    -webkit-transform: scale(0);
    transform: scale(0);
}

Let us know how it goes!

[riugn557]

Hi Thai,

Actually there is a demo of the animation here: https://theme.co/pro/ under number 4 ‘Introducing Presets’.

So it is just two red dots on either side of the item that I want to appear when it is hovered over.

Thank you!
LS

[paul.r]

Hi LS,

Please note that that page is our sales and not a demo.

Our sales page is custom built and same goes to that animation.

This would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!