Difficulty of a vertical, 90 degree menu ?

  • I have a new client for developing their site. The design he has given me has a vertical menu, the text is also at a 90 degree angle. It resembles tabs of a notebook. The tabs could be images with the text, but still, it seems like a pain in the butt to build, and for future management.

    This seems highly unconventional for a WordPress build, I have no idea how to tackle it. w

    Here is a link to an image of the design:

    Here

    It seems like a lot of extra work for such an unorthodox menu layout. Is there a straightforward way to do this? CSS? It probably won’t be responsive either?

    Any guidance is appreciated, thank you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator cubecolour

    (@numeeja)

    I don’t think there are would be any insurmountable problems with building that design in a WordPress theme.

    You could use the css rotate transform properties to turn a menu bar on its side (or the elements in a menu bar depending on how you tackle it):

    transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-o-transform: rotate(90deg); /* Opera */
-moz-transform: rotate(90deg); /* Firefox */

    For ie8 you should be able to use the rotation property of the BasicImage filter.

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

    For the mobile window size in the responsive layout you could use rules in the media queries to change the floats & rotation to move the menu & change the presentation to something more appropriate.

    This isn’t WordPress-specific, so this would probably warrant a more in-depth answer on a css forum than here.

    Thread Starter Chris

    (@forumusr)

    Ok wow that css actually basically worked with minimal hassle. I was able to add absolute positioning to place it running down the right column of the content window. (Is there a better way?)

    Can you please explain this further or how to implement this:

    For ie8 you should be able to use the rotation property of the BasicImage filter.

    Hopefully It is just a matter now of styling it.

    A broader concern is the compatibility and responsiveness on mobile devices. The client might be pleased to get his vertical menu, but I’m concerned how it will appear on mobile devices.

    Thank you very much, so far this was very helpful!

    Moderator cubecolour

    (@numeeja)

    To use the basic image filter to target IE, you would just include the additional ‘filter’ line in the CSS after the transform rules.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Difficulty of a vertical, 90 degree menu ?’ is closed to new replies.