Hi everyone,

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).
Is there another easier solution like javascript, which I don't know much about either, but could handle it out with a little example?
Or... if someone would be so kind to create a flash-based menu for me :P *begging*

Thanks in advance,
Dre a.k.a. DyingMuppet

Hi.

I can't help you with Flash.

But if you feel a little bit adventurous, have a look at CSS Text-Rotation.

For example here:http://snook.ca/archives/html_and_css/css-text-rotation
or maybe here: http://css-tricks.com/snippets/css/text-rotation/

Cheers,
Christian

Thanks Christian,

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.
http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/#transforms
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.

Thanks again,
Dre

Yay, glad you found something :-)

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?

Oh, i'm sorry but i this is beyond my knowledge of SS. :-(

Cheers,
Christian

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

Cheers,
Dre

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.

Cheers,
Dre

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.

TIA

Hey again,

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.

I'll keep you'll in touch.
Cheers, Dre