Skip to content

Instantly share code, notes, and snippets.

@joecritch

joecritch/slantednav.css

Created January 16, 2011 21:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joecritch/782152 to your computer and use it in GitHub Desktop.
Save joecritch/782152 to your computer and use it in GitHub Desktop.
Download ZIP
"A quick example of how to create slanted navigation that uses CSS3 transforms.
Raw
slantednav.css
#main-nav > ul { overflow: hidden; margin-top: 50px; }
#main-nav > ul > li { float: left; overflow: hidden; padding: 20px; font-size: 18px; margin-left: -35px; }
#main-nav > ul > li:first-child { margin-left: 0px; border-radius: 10px; }
#main-nav > ul > li > a { color: #444; text-decoration: none; overflow: hidden; display: block; -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -webkit-transform: rotate(20deg); background: #bbb; margin-bottom: -100px; margin-top: -70px; height: 150px; border-left: 1px solid white; }
#main-nav > ul > li:first-child > a { border-radius: 10px; border-left: 0; }
#main-nav > ul > li > a > span { overflow: hidden; display: block; -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); padding: 0 20px; margin-top: 57px; }
#main-nav > ul > li > a:hover { background: #aaa; }
#main-nav > ul > li.current > a { background: #000; color: #fff; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment