Solved

diagonal menu css/Jquery

Posted on 2012-03-30
8
1,650 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Problem with a CSS in a page 2 26
Put glyphicon in my input button 4 26
Rhino javascript replace special characters 4 18
Not seen Link button 5 14
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

911 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now