Tue, 2013-03-26 19:19
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.
Tue, 2013-03-26 21:45
#1
Code?
What have you got so far?
cheers,
gary
Wed, 2013-03-27 00:11
#2
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
Wed, 2013-03-27 02:11
#3
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.