cssmenutranslate-animationradial

css translate away from screen edge


I'm using the following radial menu...

http://www.cssscript.com/demo/radial-popup-menu-with-javascript-and-css3-circlemenu/#

Looks great, however I want two on my page. One bottom right and one bottom left.

That's no biggy, however obviously when on the left of the screen i need the buttons to pop out to the right and visa versa.

my question...

for each of the list items there's a transform in the CSS like...

transform: translate(-144px, 0);

obviously having it as a positive 144 will make it move to the right, which is great when the menu is positioned in the bottom left...

Rather than having to have a left class and right class with essentially the same CSS behind it, just one being positive and the other negative, is there a nice way to have 1 set of css rules that will just translate the li away from the div/screen edge?? or maybe I am thinking about this completely wrong (feel free to say if i am being a numpty)?

thanks


Solution

  • marking as resolved, as per @hissvards comment

    "I don't think there's a way to do it using pure CSS, but it would be dead easy with a preprocessor. - Hissvard"