Hi, can anyone help me in any way (in detail or with general directions) so i can achieve this?
a simple draft/picture of what i want to achieve
What is this?
It’s pretty much a menu by its basic functionality.
There will be undefined amount of links (it should be able to read the list from a database or an xml file whatever works best) and each link will direct to a specific page.
(the back-end doesn’t concern me, that will be an other guys job, i only focus on front-end)
How it should work?
After navigating the menu, there is going to be a selected menupoint (the one inside the red rectangle in this case) and once hitting enter that will redirect to that specific page.
What do i need help with?
I want to animate this, in this way: After clicking the small “up” button-arrow, the whole menu will “slide” up one row. Similiarly after clicking the “down” button-arrow it will slide down.
For example: After clicking the “up” btn;
The menupoint in focus “Webdesign” in this case will slide down, looses some opacity.
The menupoint “Front End” will become the one in focus, and gains full opacity.
The menupoints should be arranged as seen on the picture, following the shape of a circle, and they should slide up and down around its circumference. And the visitor should be able to circle around if he reaches the last link, smoothly (wraps around to the first link).
And there should be only for example 4 links visible at the time, the ones in direction should be appearing as needed, the ones out-direction should be disappearing as needed.
(If needed i can clarify this with an AE animation, idk how clear it is. )
With what can i achieve this? I guess simple HTML and CSS wont be enough - these are the langs i know - maybe javascript or smth?