How to rotate a menu but not its sub menus ?

Forum Moderators: not2easy

Message Too Old, No Replies

How to rotate a menu but not its sub menus ?

eSite

3:10 am on Sep 22, 2011 (gmt 0)

Hi,

I have an horizontal 3 levels suckerfish type of menu
Example: [htmldog.com...]
and I want to rotate 90 left and 90 right some of the main tabs.
Screenshot: [img718.imageshack.us...]

I can't really use writing-mode because it's poorly supported.
I would rather not used images or javascript.

I'm left with transform, but it also rotates every descendant elements and it looks like a pain to put them back in place.

Has anyone done it before ? is there a method ?

Or perhaps you know of another solution.

Paul_o_b

11:21 am on Sep 22, 2011 (gmt 0)

If you have constructed the tabs using the anchor rather than the parent list element then you can target only the top level without interefering with the rest.

e.g.


ul#nav > li > a{
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
    transform: rotate(90deg);
white-space:nowrap;
border-radius:10px;
}

(Not supported in ie8 and under of course.)

It all depends on what you have set up already of course.

eSite

1:37 pm on Sep 22, 2011 (gmt 0)

That's what I tried but it doesn't happen.
So I tried applying a counter rotation but it becomes a nightmare.
Here's my code [jsfiddle.net...]
Click on "C Level 1" then the first (left) "Level 2" to show Level 3

Paul_o_b

4:07 pm on Sep 22, 2011 (gmt 0)

No, you still applied the rules tho the list element. If you change the styling to be all on the main level anchor you don't have to worry about nested elements.


#nav_main_gts > li > a {
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-1);
transform: rotate(-90deg);
}
.ul_nav_main li a {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
}

Just move the othertab styles from the list to the ancchor instead. I just tried it and with a bit of tweaking it will work ok. You will have to change the positioning to match where you want the flyout of course but it will be the right way around.

eSite

11:04 am on Sep 23, 2011 (gmt 0)

Ah ok, by anchor I thought you meant id="", not <a>.

I did try #nav_main_gts > li > like I said but it didn't work at that time, for some reason.

I think I got the trick: by selecting <a> we prevent the declaration to apply to descendants because… <a> has no descendants ! while li and ul do.

The inconvenient with this is that if I want to rotate several Level 1 (on the right in my menu) then each of them rotates regarding to themselves, and so from:
_ _ _
I end up with:
| | |
instead of (desired):
|
|
|

Is there an easy fix instead of adding id and repositioning each ?
I'm trying display: inline; but it has no effect.

Paul_o_b

7:18 pm on Sep 23, 2011 (gmt 0)

Hi,

I'd do it like this:
(excuse the masses of code)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
body {
background:#00257a;
padding:25px 0 0;
}
.wrap {
width:960px;
margin:auto;
background:#fff;
min-height:300px;
-webkit-box-shadow: 0px 0px 3px 3px #000;
-moz-box-shadow: 0px 0px 3px 3px #000;
box-shadow: 0px 0px 3px 3px #000;
padding:10px;
}
ul.tabs, ul.tabs ul {
margin:0 auto;
padding:0;
list-style:none;
}
ul.tabs {
width:980px;
height:35px;
}
ul.tabs li {
float:left;
width:100px;
position:relative;
margin:0 3px 0 0;
}
ul.tabs > li > a {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
float:left;
height:35px;
line-height:35px;
width:100px;
text-align:center;
background:#d28d00;
text-decoration:none;
-webkit-box-shadow: 0px 0px 2px 2px #000;
-moz-box-shadow: 0px 0px 2px 2px #000;
box-shadow: 0px 0px 2px 2px #000;
color:#000;
font-weight:bold;
}
ul.tabs li:hover > a { background:#fff; }
ul.tabs li ul {
position:absolute;
left:0;
top:35px;
width:100px;
opacity:0;
}
ul.tabs li li { width:100px; }
ul.tabs ul a {
display:block;
line-height:25px;
height:25px;
background:#fcf;
border:1px solid #000;
margin-bottom:-1px;
text-decoration:none;
padding:0 5px;
color:#000;
}
ul.tabs li:hover ul { margin-left:0;opacity:1;}
/* right side tabs */
li.rotateR > a {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=.5);
transform: rotate(90deg);
}
ul.tabs li.rotateR {
clear:right;
height:105px;
float:right;
top:70px;
left:73px;
}
ul.tabs li.rotateR ul {
left:-70px;
top:-35px;
}
/* left side tabs */
li.rotateL > a {
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-1);
transform: rotate(-90deg);
}
ul.tabs ul {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
ul.tabs li.rotateL {
clear:left;
height:105px;
float:left;
top:-35px;
left:-73px;
}
ul.tabs li.rotateL ul {
left:70px;
top:-35px;
}
</style>
</head>

<body>
<ul class="tabs">
<li><a href="#">Tab A</a>
<ul>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
</ul>
</li>
<li><a href="#">Tab B</a>
<ul>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
</ul>
</li>
<li><a href="#">Tab C</a>
<ul>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
</ul>
</li>
<li><a href="#">Tab D</a>
<ul>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
</ul>
</li>
<li><a href="#">Tab E</a>
<ul>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
</ul>
</li>
<li><a href="#">Tab F</a>
<ul>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
</ul>
</li>
<li><a href="#">Tab G</a>
<ul>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
</ul>
</li>
<li class="rotateR"><a href="#">Tab H</a>
<ul>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
</ul>
</li>
<li class="rotateR"><a href="#">Tab I</a>
<ul>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
</ul>
</li>
<li class="rotateL"><a href="#">Tab Z</a>
<ul>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
</ul>
</li>
<li class="rotateL"><a href="#">Tab y</a>
<ul>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
</ul>
</li>
</ul>
<div class="wrap">
<h1>Example Rotated tabs IE9+</h1>
</div>
</body>
</html>

Is that what you were aiming for?

Paul_o_b

9:19 am on Sep 24, 2011 (gmt 0)

I just noticed I missed a couple of rules out to tidy this up


ul.tabs li ul {
position:absolute;
left:0;
top:35px;
width:100px;
opacity:0;
height:0;
width:0;
overflow:hidden;
}
ul.tabs li:hover ul {
margin-left:0;
opacity:1;
height:auto;
width:100px;
overflow:visible;
}

The height and width were set to zero and then increased to get the transition efffect with opacity.

eSite

1:27 am on Sep 25, 2011 (gmt 0)

I kinda feel bad that you wrote all this code while I didn't need it.
Key code with an explanation is much easier to grasp than an entire template.

Apparently the rule that does the trick is

ul.tabs li.rotateR {
clear:right;
height:105px;
float:right;
top:70px;
left:73px;
}

Could you explain what clear and float do in this case ?

I've adapted it and it works, however the level 2 menu, while it's vertical, shows gaps between each anchors, just like for level 1. How did you fix that in your template ? what about level 3 ?

P.S. are you sure about filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=.5); ? I read that the only values are 0 1 2 3 but they don't seem to correspond to 0 90 180 270deg. [msdn.microsoft.com...]

Paul_o_b

8:38 am on Sep 26, 2011 (gmt 0)

Hi,

Sorry about the code but I looked at yours and it looked nothing like the drawing so I thought it would be easier to have a clean version that looked like your drawing and was more structured.

I cleared the floats for the side tabs so that they went vertical and not horizontal and then all they needed was a little push into position and could be styled with one class rather than moving each individual item. As they were rotated the height had to be changed to make room.

Yes the IE filter code is wrong and in fact should be removed form the main styles because it breaks IE9. If you move the two filter rules into conditional comments then this will work in IE8 also (based on my code above).


<!--[if lt IE 9]>
<style type="text/css">
li.rotateL > a {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
li.rotateR > a {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
ul.tabs li.rotateL {
top:-35px;
left:-36px;
}
ul.tabs li.rotateR {
top:70px;
left:103px;
}
</style>
<![endif]-->

There are no gaps in the anchors in my demo because I styled the top level separately using the child selector so that there were no conflicts. I uses a negative bottom margin in the anchors on the submenu just to avoid having a double border on the anchor.

Nearly all of it is basic css and the complicated parts being the changes to position for the transforms.

By applying transforms to the top level anchor only you don't have to worry about the cascade affecting the nested elements.

If you are still having problems then update your example and I'll take another look but you really have everything you need to make this work in IE8+ now.;)

eSite

2:19 am on Sep 27, 2011 (gmt 0)

Okay I corrected level 2 and 3 with:


      #nav_main_nac li ul li {
      position: relative;
      left: 0px;
      top: 0px;
      height: 29px;
      }

      .ul_nav_main, .ul_nav_main ul { /* all lists */
      z-index: 100;

Thanks.