jQueryとCSSで見え隠れするサイドメニューをつくる

  • LINEで送る

今回はWebページ左端にある「open」ボタンをクリックすると,左側から格納されたメニューバーが出現するアニメーションを作成します.このアニメーションは複雑そうに見えてとても簡単です.ブラウザの画面より外側に要素を配置しておき,ボタンが押されたら左側の位置を0にするだけです.文章で見てもわからないので,実際にコードを見てみましょう.

サンプルページ

サイドメニューのイメージは以下の通りです.

ファイルの構成は以下の通りです.jQuery関連のファイルはjsフォルダに入っています.

HTML

<div id="container" role="main">
    <aside id="side-bar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Archive</a></li>
            <li><a href="#">Recent</a></li>
            <li><a href="#">Category</a></li>
            <li><a href="#">Information</a></li>
        </ul>
        <button>open...</button>
    </aside>
</div>

HTMLはメニューのところだけ,抜粋して表示しています.サイドバーの中身はリストとボタンのみで構成されています.

SCSS(CSS)

#side-bar {
    background-color: rgba(0,0,0, 0.7);
    width: 250px;
    height: 100%;
    position: fixed;
    top: 0;
    left: -250px;
    z-index: 2;
    ul {
        position: absolute;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        li {
            list-style: none;
            text-align: center;
            font-size: 20px;
            margin: 25px;
            a {
                color: white;
                text-decoration: none;
            }
        }
    }
    button {
        background-color: rgba(0,0,0, 0.7);
        color: white;
        border: none;
        box-sizing: border-box;
        font-size: 20px;
        width: 100px;
        height: 2em;
        transform: rotate(90deg);
        transform-origin:left bottom;
        position: absolute;
        top: 150px;
        left: 100%;
    }
}

サイドバーの横幅を250pxとし,{position: fixed}で{left: -250px}とすることで,見えないところに配置しています.#side-bar内の要素は{position: absolute}で配置しています.その中でもbutton要素はボックスを左下の角を中心に90度右回転させて配置してあります.button要素は{left: 100%}にすることで,buttonのみが表示されるようになっています.

jQuery (main.js)

$(function(){

    var time  = 700;
    var $aside = $('#container #side-bar');
    var $sideButton = $aside.find('button');
    var butonText = $sideButton.text();

    $sideButton.on('click',function(){
        $aside.toggleClass('open');
        if ($aside.hasClass('open')){
            $aside.stop(true).animate({
                left: 0
            },time,'easeOutSine');
            $sideButton.text(butonText.replace("open...", "close..."));
        } else {
            $aside.stop(true).animate({
                left: '-250px'
            },time,'easeOutSine');
            $sideButton.text(butonText.replace("close...","open..."));
        }
    });
});

サイドメニューが左右に動くアニメーションはanimate()メソッドで「left」の値を変更することで動作します.animate()メソッドの第2引数には,アニメーション時間を設定し,第3引数にはイージングを設定します.イージングとは簡単に言ってしまうと,アニメーションスタートから終了までの時間の間での動き方の設定です.このプロパティは「jQuery UI」を使用しており,さまざなプロパティが用意されています.下記のサイトで参考にすることができます.

jQuery日本語リファレンス

http://semooh.jp/jquery/cont/doc/easing/

toggleClass()メソッドはbuttonがクリックされると,openクラスがなければ追加し,あれば削除するメソッドです.このopenクラスの有無で処理をif文で分けています.

また,replace()メソッドで文字列を変換し,閉じるときには「close…」が表示されるようにします.

サンプルページはここから閲覧できます.

CodeCamp

SNSでもご購読できます。

コメントを残す

*