月: 2009年2月

またも汎用性がないシリーズ
基本的にやってることは、toggleだけというシンプルというか、ありきたりでつまらんモノ。

HTML

<div id="mapNav">
    <dl class="closed">
        <dt id="btn">メニュー開く</dt>
        <dd>
            メニューの中身をHTMLで書いてね
        </dd>
    </dl>
</div>

JavaScript

$(function(){
    $("#btn").toggle(
        function(){
            $("#mapNav").animate({
                width:"175px"
            },"fast");
            $("#mapNav dl").removeClass("closed")
                .addClass("opend")
            $(this).html("メニュー閉じる");
        },
        function(){
            $("#mapNav").animate({
                width:"20px"
            },"fast");
            $("#mapNav dl").removeClass("opend")
                .addClass("closed");
            $(this).html("メニュー開く");
        }
    );
})

css

#mapNav {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 400px;
    background-color: #fff;
}

#mapNav dl {
    overflow: hidden;
}

#btn {
    top: 0;
    left: 0;
    display: block;
    text-indent: -9999em;
}

.closed #btn {
    width: 20px;
    height: 53px;
    background: url(./images/btn_menu_open.png) no-repeat right top;
}

.opend #btn {
    width: 20px;
    float: left;
    height: 58px;
    background: url(./images/btn_menu_close.png) no-repeat right top;
}

.closed dd {
    display: none;
}

.opend {
}

.opend dl {
    border: none;
}

.opend dd {
    float: right;
    width: 155px;
    height: 400px;
    overflow: auto;
}

.opend dd dl {
    padding: 5px;
}

.opend dd dd {
    height: auto;
    margin-bottom: 5px;
}

サンプル
jQueryを使った、サイドからスライドして開閉するメニュー Sample