HTML5+JS でメニューをそこそこカッコよく出してみる

前回の続き。

white-azalea.hatenablog.jp

マウスを左に持って行ったらメニューを表示する仕様で実装してみた。
タグ構成は下記

<nav role="popup-nav" class="popup-nav" blar-target="all_contemts">
    <div class="popup-icon">
        <div class="glyphicon glyphicon-menu-hamburger">CONTENTS</div>
    </div>
    <div class="content">
        <ul class="nav nav-pills nav-stacked">
            <li>
                <h4>Contents</h4>
            </li>
            <li><a href="#wizard">Wizard</a></li>
        </ul>
    </div>
</nav>
<div id="all_contemts" class="popup-naved-content">
    .... コンテンツ本文
</div>

CSS の記述は下記の仕様。
コンポーネント作る気でやってたので CSS は二つ。

.popup-nav {
    top:0;
    left:0;
    position: fixed;
    height:100%;
    z-index: 900;
    width: 64px;

    -webkit-transition: width 0.2s ease-in-out;
    -moz-transition: width 0.2s ease-in-out;
    -o-transition: width 0.2s ease-in-out;
    transition: width 0.2s ease-in-out;
    .popup-icon {
        position: relative;
        height:100%;
        width: 100%;
        display: block;
        text-align: center;
        padding-top:50%;
        height: 100%;
    }
    .content {
        position: relative;
        display:none;
    }
}

.popup-nav.active {
    width: 300px;
    max-width: 90%;
    .popup-icon {
        display: none;
    }
    .content {
        padding-left: 1em;
        padding-right: 1em;
        height:100%;
        display: block;
    }
}

.popup-naved-content {
    padding-left: 64px;
}

メニューは常に左に配置しておき、アクティブになったら横幅をアニメーションで広げるように設定。
popup-naved-content でメニュー(縮小版)にコンテンツが重ならないように padding を設定。

ほっとくと背景色がなくて、メニューと分かりづらいので、次の CSS で適当に色付け。

.popup-nav {
    color: #fff;
    background-color: #6f5499;
    a { color: #fff; }
    .nav > li > a:hover, .nav > li > a:focus {
        background-color: lighten(#6f5499, 10%);
    }
    .popup-icon {
        writing-mode: tb-rl;
        writing-mode: vertical-rl;
        -moz-writing-mode: vertical-rl;
        -o-writing-mode: vertical-rl;
        -webkit-writing-mode: vertical-rl;
    }
    .content {
        padding-top: 10%;
    }
}

で、切り替える為の JavaScript (というか Coffee)当然 jquery 必須

class PopupNav
    constructor: (@jqTarget) ->
        @jqContrnts = $('#' + @jqTarget.attr("blar-target"))
        @setHandler()
    openMenu: () =>
        @jqContrnts.addClass("blar")
        @jqTarget.addClass("active")
    closeMenu: () =>
        @jqContrnts.removeClass("blar")
        @jqTarget.removeClass("active")
    setHandler: () =>
        @jqTarget.hover(@openMenu, @closeMenu)

$(document).ready () ->
    new PopupNav($('[role="popup-nav"]'))

で、適用するとこんな感じ