12 May 2010 at 6:23am
(Last edited: 12 May 2010 9:56pm),
I was wondering, would it be possible to create a menu similar or identical to the attached image?
I've searched at many places to create this in CSS/HTML which seems pretty much impossible.
I could sort it out in pictures but that would need to be hardcoded, and for the more diagonal text it would be a disaster clicking the right page.
One other solution I found was flash based, although I don't know anything about flash coding and either way, anyone without flash wouldn't see the menu in its nice form. (A workaround would be useful in that place).
Or... if someone would be so kind to create a flash-based menu for me :P *begging*
Although these articles where about turning the text by 90 degree steps, I've found my answer in the link at the end of the first article you posted.
With the -o-transform: ; option I hope I can make something usable.
Though I haven't tested anything yet, I think the difficulty will be the differences in rotation.
Is there a way I can count the pages in a div tag via SS xml output so that I can rotate the different menu items by number?
Mind again that I haven't tried anything with this yet because I'm at work right now and don't really have the time.
After a quick peek in the database I noticed in the SiteTree table a column called "Sort" I suppose I could use that as class name for my divs as $Sort in the Menu control, since it uses the variables $title, $Content and more.
I hope I'm right at this.
I can't wait to play with it after work :P
humm, it seems that not many browser now support the CSS3 standards completely, which means that in many cases the menu would be displayed straight forward, though Chrome, Opera and Safari do support the transform and transition.
It looks like Firefox is out of the boat for this one too.
I'll keep you informed.
I've tried out some stuff and it actually looks like it can work... at least for real browsers like chrome, opera and safari. Firefox is a point to discuss atm. IE is just crap...
The only thing I now need is to split the menu in parts.
Lets say I want the first 5 menu items to be rotated by 15 degrees counter clockwise, then the next 3 rotated by 10 degrees clockwise and so on.
I would need to put those in a div apart from each other to get them rotated including the "card" picture as background.
I jumped out a bit of my CSS try-out.
I found that using SVG (scalable Vector Graphics) scripting in html/php is possible and W3C recommended.
The only thing.... ofcourse... is IE again :S I guess I'll just have to ban all the IE users and force them to download a sane browser :P
Though I'm still not sure yet how to get the menu sepparated to make differences in directions.
I think I have to pull out the menu to XML in the SVG script and let SVG handle the differences.
Here is some nice info about SVG scripting for the once who like to try the same: http://www.w3.org/TR/SVG.