• Locked
3 replies [Last post]
Tue, 2013-03-26 19:19
caiobeltrao
caiobeltrao's picture
Offline
newbie
Last seen: 9 years 45 weeks ago
Timezone: GMT-3
Joined: 2013-03-26
Posts: 4
Points: 6

Hi everybody,
I'm a mid-level CSS programer, and ran into a challenge and was wondering, how to set up this diagonal menu.

Does anyone can help me?
Thanks in advance.

Top
Tags:
Tue, 2013-03-26 21:45
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 48 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Code?

What have you got so far?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Wed, 2013-03-27 00:11
#2
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 48 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Way too much time on my hands

This will fail in older browsers and in Opera, though you could use MSIE's filter property for older IEs.

I recall there was a css blog from way back when (pre css3 or html5) that had diagonal menu items, but can't remember whose it was. :sorry:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />
 
    <title>test doc</title>
 
    <!-- hack for bug in Web Developer addon for Firefox.  Used for
	 development and debugging only-->
    <link rel="stylesheet"
	  type="text/css" href="x" />
 
    <style type="text/css">
      body {
        font: 100%/1.5 san-serif;
        margin: 0;
        }
 
      p {
        font-size: 1em;
        }
 
      h1 {
	float:	left;
        }
 
      ul {
        display: table;
        height: 8em;
	list-style:none;
        }
 
      ul li {
        color: white;
	display: table-cell;
        height: 8em;
        padding: 0 1em 0;
        -moz-transform: skew(-30deg);
        -o-transform: skew(-30deg);   /* Opera fails */
        -webkit-transform: skew(-30deg);
        -ms-transform: skew(-30deg);
        transform: skew(-30deg);
        vertical-align: bottom;
        }
 
      ul li a {
        color: inherit;
        display: block;
        -moz-transform: skew(30deg);
        -o-transform: skew(30deg);  
        -webkit-transform: skew(30deg);
        -ms-transform: skew(30deg);
        transform: skew(30deg);
        }
 
      ul li:nth-child(4n+1) {
        background-color: navy;
        }
 
      ul li:nth-child(4n+2) {
        background-color: green;
        }
 
      ul li:nth-child(4n+3) {
        background-color: maroon;
        }
 
      ul li:nth-child(4n+4) {
        background-color: purple;
        }
 
    </style>
  </head>
 
  <body>
    <h1>Project</h1>
 
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">A ruffino</a></li>
      <li><a href="#">Produtos</a></li>
      <li><a href="#">Mostra de Ambientos</a></li>
      <li><a href="#">Onda Encontrar</a></li>
      <li><a href="#">Fale Conosco</a></li>
    </ul>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Wed, 2013-03-27 02:11
#3
caiobeltrao
caiobeltrao's picture
Offline
newbie
Last seen: 9 years 45 weeks ago
Timezone: GMT-3
Joined: 2013-03-26
Posts: 4
Points: 6

Thanks

Hi Gary,
I didn't know this skew propriety in CSS3, and that's exactly what I need. And this way is much easier to do the hovers before.

Thanks very much for you effort, I really appreciate it.

Cheers,
Caio.

Top
  • Locked