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
coolispaulAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
animecycConnect With a Mentor Commented:
Here is a quick demo of what you want. This should be able to get you started. Let me know if you need more help on it.

http://jsfiddle.net/SmPSz/

A quick update to work in Firefox and other CSS3 enabled browsers:

http://jsfiddle.net/SmPSz/1/

Another update to add the animation you requested:

http://jsfiddle.net/SmPSz/2/
0
 
Gurvinder Pal SinghCommented:
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
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

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

and if so how?

Thanks
0
 
Gurvinder Pal SinghCommented:
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,
0
 
Gurvinder Pal SinghCommented:
@animecyc: great work
0
 
coolispaulAuthor Commented:
awesome answer
0
All Courses

From novice to tech pro — start learning today.