Cacher is the code snippet organizer for pro developers

facebookのメニューのようなスライダーを実装する

<button id="button">クリック</button>
    <div id="foo">
        <ul>
            <li><a href="">ナビ</a></li>
            <li><a href="">ナビ</a></li>
            <li><a href="">ナビ</a></li>
        </ul>
    </div>

css

html{
    background: #ddd;
}
#foo{
    float: left;
    background: #fff;
    width: 200px;
    display: none;
    color: #666;
}

jQuery

    jQuery(document).ready(function(){
        var switchFlg = true;
        var winHeight = $(window).height();
        $(document).on('click','#button',function(){
            if (switchFlg) {
                $('#foo').show();
                switchFlg = false;
                $('#foo').animte({
                    width: '300px',
                    height: winHeight + 'px',
                },300);
            } else {
                $('#foo').hide();
                switchFlg = true;
                $('#foo').animte({
                    width: '0px',
                    height: winHeight + 'px',
                },300);
            }
        });
    });