Jump to:

3397 Posts in 978 Topics by 854 members

Template Questions

SilverStripe Forums » Template Questions » Flash, CSS/HTML or other language menu with diagonal text?

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1 2
Go to End
Author Topic: 4364 Views
  • DyingMuppet
    Avatar
    Community Member
    11 Posts

    Flash, CSS/HTML or other language menu with diagonal text? Link to this post

    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 *begging*

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

    Attached Files
  • Invader_Zim
    Avatar
    Community Member
    141 Posts

    Re: Flash, CSS/HTML or other language menu with diagonal text? Link to this post

    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

  • DyingMuppet
    Avatar
    Community Member
    11 Posts

    Re: Flash, CSS/HTML or other language menu with diagonal text? Link to this post

    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

  • Invader_Zim
    Avatar
    Community Member
    141 Posts

    Re: Flash, CSS/HTML or other language menu with diagonal text? Link to this post

    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

  • DyingMuppet
    Avatar
    Community Member
    11 Posts

    Re: Flash, CSS/HTML or other language menu with diagonal text? Link to this post

    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

    Cheers,
    Dre

  • DyingMuppet
    Avatar
    Community Member
    11 Posts

    Re: Flash, CSS/HTML or other language menu with diagonal text? Link to this post

    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

  • DyingMuppet
    Avatar
    Community Member
    11 Posts

    Re: Flash, CSS/HTML or other language menu with diagonal text? Link to this post

    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

  • DyingMuppet
    Avatar
    Community Member
    11 Posts

    Re: Flash, CSS/HTML or other language menu with diagonal text? Link to this post

    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
    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

    4364 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.