Vertical Bar

by kadymov

HTML

<div class="wrapper">
    <div class="helper">
        <ul class="menu">
            <li>ho</li>
            <li>hoho</li>
            <li>hohoho</li>
            <li>ho-ho!</li>
            <li>ho</li>
            <li>hoho</li>
            <li>hohoho</li>
            <li>ho-ho!</li>
            <li>ho</li>
            <li>hoho</li>
            <li>hohoho</li>
            <li>ho-ho!</li>
            <li>ho</li>
            <li>hoho</li>
            <li>hohoho</li>
            <li>ho-ho!</li>
        </ul>
    </div>
</div>

CSS

body {
    font: 12px/12px Arial;
    background: #f8f8f8;
}

.wrapper {
    border: 1px solid #aaa;
    width: 400px;
    height: 400px;
    position: relative;
    background: #fff;
}

.helper {
    position: absolute;
    right: 0;
    top: 0;
    float: right;
    width: 0;
    overflow: visible;
}

.menu {
    margin: 0;
    padding: 3px 3px 3px 5px;
    list-style: none;
    border: 1px solid #aaa;
    width: 400px;
    position: absolute;
    left: 0;
    
    background: #eee;
    
    box-sizing: border-box;
   
    -webkit-transform-origin: top left;
       -moz-transform-origin: top left;
        -ms-transform-origin: top left;
         -o-transform-origin: top left;
            transform-origin: top left;
    
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.menu li {  
    text-align: center;
    border: 1px solid #ccc;

    height: 13px;
    display: inline-block;
    
    padding: 5px;
    margin: 2px 0 0 -2px;
    
    cursor: pointer;
    
    background: #f8f8f8;
}

.menu li:hover {
    background: #ddd;
}