Solved

diagonal menu css/Jquery

Posted on 2012-03-30
8
1,658 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
What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

 

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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses four methods for overlaying images in a container on a web 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 style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

773 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