CODEWITHSUNDEEP
csscss-transforms
yu_ominae
yu_ominae

Reputation: 2933

Sideways tab with css-rotated tab headers

I'm trying to make a tabbed menu in pure html and css.

The tab menu is contained on the right side of the page, so the tabs are shown on the left-hand side of the menu. I think I got that part working ok.

What I am struggling with is getting the text in the tabs to rotate sideways so as not to have ridiculously long horizontal tabs.

This fidle http://jsfiddle.net/9gPXF/ here shows what i have so far. The bit that I am struggling with is getting the width of the tabs to remain manageable.

The relevant css code is this bit:

    #RightMenu #Tabs > li
    {
        display: block;
        width: 3em;
        height: 4em;
        line-height: 4em;
        border-top: 1px solid #000000;
        border-bottom: 1px solid #000000;
        border-left: 1px solid #000000;
    }

        #RightMenu #Tabs > li > span
        {
            display: inline-block;
            line-height: 1em;
            -webkit-transform: rotate(-90deg);
            text-align: center;
        }

The li elements contain a span which I rotate in css. The thing is that actual width of the li has to be sufficient to accomodate the span or the text break. Which is annoying, because I then have to make the tabs both wide and high enough for the text.

How should I modify the style to get this to work?

UPDATE:

I might be going about this completely wrong. If anybody knows of any other way to make this work, I'd take that as an answer too.

Upvotes: 3

Views: 5573

Answers (1)

yu_ominae
yu_ominae

Reputation: 2933

After fiddling about with my fiddle for a (long while), I think I finally got it working satisfactorily. The fiddle is available here

The html:

<div id="RightMenu">
<ul id="Tabs">
    <li><span>Menu 1</span>

    </li>
    <li><span>My really long menu</span>

    </li>
    <li><span>Menu 3</span>

    </li>
</ul>
<ul id="Menus">
    <li>
        <div>Menu 1 content</div>
    </li>
    <li>Menu 2 content</li>
    <li>Menu 3 content</li>
</ul>
</div>
<div id="Content">Content</div>

The css:

#Content {
    width: 100%;
}
#RightMenu {
    position: absolute;
    height: 100%;
    right: 0;
    z-index: 10;
}
#RightMenu #Tabs, #RightMenu #Menus {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    list-style: none;
}
#RightMenu #Tabs {
    position: absolute;
    white-space: nowrap;
    top: 0;
    right: 100%;
    text-align: right;
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: rotate(-90deg);
    transform-origin: 100% 100%;
    transform: rotate(-90deg);
}
#RightMenu #Tabs > li {
    display: inline-block;
    cursor: pointer;
    border: 1px solid black;
    border-bottom: none;
}

#RightMenu #Menus
{
    width: 200px;
}

#RightMenu #Menus li
{
    white-space: nowrap;
}

additional js:

$(document).ready(function () {
    $('#RightMenu #Tabs > li').click(function () {
        $('#RightMenu #Menus').animate({
            width: 'toggle'
        }, 1000);
    });
});

This should give a sliding right sidebar with vertical tabs.

Thanks to Mark Ryan Sallee for his fiddle which put me on the right track to get this working.

UPDATE:

I have updated this fiddle so that it will work in all major browsers now.

Upvotes: 5

Related Questions