?
Solved

diagonal menu css/Jquery

Posted on 2012-03-30
8
Medium Priority
?
1,720 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

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:Gurvinder Pal Singh
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 2000 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:Gurvinder Pal Singh
ID: 37789860
@animecyc: great work
0
 

Author Closing Comment

by:coolispaul
ID: 37790621
awesome answer
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

764 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