Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions /

Flash, CSS/HTML or other language menu with diagonal text?


Go to End
Reply


10 Posts   4764 Views

Avatar
DyingMuppet

Community Member, 11 Posts

12 May 2010 at 6:23am

Edited: 12/05/2010 9:56pm

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

Attached Files
Avatar
Invader_Zim

Community Member, 141 Posts

12 May 2010 at 10:41pm

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:[url]http://snook.ca/archives/html_and_css/css-text-rotation[/url]
or maybe here: [url]http://css-tricks.com/snippets/css/text-rotation/[/url]

Cheers,
Christian

Avatar
DyingMuppet

Community Member, 11 Posts

12 May 2010 at 11:16pm

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

Avatar
Invader_Zim

Community Member, 141 Posts

12 May 2010 at 11:39pm

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

Avatar
DyingMuppet

Community Member, 11 Posts

12 May 2010 at 11:51pm

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

Avatar
DyingMuppet

Community Member, 11 Posts

13 May 2010 at 3:10am

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

Avatar
DyingMuppet

Community Member, 11 Posts

16 May 2010 at 4:34am

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

Avatar
DyingMuppet

Community Member, 11 Posts

18 May 2010 at 5:55am

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

Go to Top