- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Taken from a tutorial at: http://www.joecritchley.com/demos/slanted-nav/
I can’t for the life of me get this to work in ANY version of IE. It only displays the navigation as a normal bulleted list, but I know it must be possible based on some findings from http://www.css3please.com such as:
-ms-transform: rotate(20deg); /* IE9 */
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand');
zoom: 1;
Here is the setup that is working in almost all other browsers:
CSS
#main-nav > ul
{
margin-top:50px;
overflow:hidden;
}
#main-nav > ul > li
{
float:left;
font-size:18px;
margin-left:-35px;
overflow:hidden;
padding:20px;
}
#main-nav > ul > li:first-child
{
border-radius:10px;
margin-left:0;
}
#main-nav > ul > li > a
{
-moz-transform:rotate(20deg);
-o-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
background:#bbb;
border-left:1px solid #FFF;
color:#444;
display:block;
height:150px;
margin-bottom:-100px;
margin-top:-70px;
overflow:hidden;
text-decoration:none;
}
#main-nav > ul > li:first-child > a
{
border-left:0;
border-radius:10px;
}
#main-nav > ul > li > a > span
{
-moz-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
display:block;
margin-top:57px;
overflow:hidden;
padding:0 20px;
}
#main-nav > ul > li > a:hover
{
background:#aaa;
}
#main-nav > ul > li.current > a
{
background:#000;
color:#fff;
}
HTML
Wow, ok thanks that solves 80% of my problem. I totally overlooked this (my first HTML5 document).