asked on

diagonal menu css/Jquery

Hi,

Is it possible to create a diagonal menu like the attached image using css/javascript?

Also, i would quite like the hover state to make each item fill up with black, a bit like this:
http://jsbin.com/ubaxi

Is it possible and how would you go about doing that?

Thanks
grab.gif

Gurvinder Pal Singh

this should help
http://stackoverflow.com/questions/6524177/css-diagonal-lines-with-filled-space
and this one too
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-diagonal-lines-with-css/

Gurvinder Pal Singh

solution previous comment doesn't have text in rotated div. Please check this barebone example
http://kingmahendra.blogspot.in/2011/03/rotating-div-with-css3.html
http://css3please.com/
http://davidwalsh.name/dw-content/css-transformations.php

Ronak Patel

check this out:

http://mirificampress.com/permalink/diagonal_nav_rollover

Demo:
http://mirificampress.com/code_examples/2008_11_19.html

coolispaul

ASKER

cool - do you think the fill part would work as a hover effect?

and if so how?

Thanks

Gurvinder Pal Singh

Hmm...but these are images, so even if you hover outside the image (near the image), it will show a hover effect. Not sure if this is acceptable to requester, but I don't think that without using rotated divs you will be able to achive this,

ASKER CERTIFIED SOLUTION

animecyc

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Gurvinder Pal Singh

@animecyc: great work

coolispaul

ASKER

awesome answer