Solved

diagonal menu css/Jquery

Posted on 2012-03-30
8
1,679 Views
Last Modified: 2012-06-27
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
0
Comment
Question by:coolispaul
8 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37786100
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37786259
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
 
LVL 5

Expert Comment

by:Ronak Patel
ID: 37786281
0
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 

Author Comment

by:coolispaul
ID: 37786289
cool - do you think the fill part would work as a hover effect?

and if so how?

Thanks
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37786480
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
 
LVL 3

Accepted Solution

by:
animecyc earned 500 total points
ID: 37789037
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37789860
@animecyc: great work
0
 

Author Closing Comment

by:coolispaul
ID: 37790621
awesome answer
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question