jQueryでサイドバー作り

アニメーションを使うpart2

「jQuery最高の教科書」を読んで作りました。

作ってみたサイドバー

  • 通常時 f:id:marikooota:20160505150047p:plain

  • クリック時 f:id:marikooota:20160505150143p:plain

HTMLのコード(サイドバー部分)

<aside>
        <ul>
            <li><a href="#"><img id="kabuki_side" src="kabuki_side1.png"></a></li>
            <li><a href="#"><img id="kabuki_side" src="kabuki_side2.png"></a></li>
            <li><a href="#"><img id="kabuki_side" src="kabuki_side3.png"></a></li>
        </ul>
        <button><img id="kabuki_open" src="open.png"></button>
</aside>
  • asideタグで囲んで、画像を縦並びのリスト表示にします。

CSSのコード(サイドバー部分)

.page-main > aside {
    background-color: rgba(0,0,0,0.8);
    width: 350px;
    height: 100%;
    top: 0;
    left: -350px;
    position: fixed;
}

.page-main > aside ul {
    margin: 0;
    padding: 0;
    top: 50px;
    left: 114px;
    position: absolute;
}

.page-main > aside li {
    margin: 0 0 20px;
    list-style: none;
}

.page-main > aside button {
    background-color: rgba(0,0,0,0.8);
    display: block;
    position: absolute;
    top: 150px;
    left: 350px;
    width: 52px;
    height: 132px;
    margin: 0;
    padding: 0;
    border: none;
}
  • サイドバーのwidthを350pxにして、leftを-350pxにすることでサイドバーを隠しておくことができる。
  • サイドバーについている開け閉めボタンにはleftを350pxにすることでサイドバーにくっつける。
display:block, inline, inline-blockの違い(考え中)
  • display:block

    対象の要素をブロックとして扱うことができる。

  • display:inline

    対象の要素をインライン要素として扱うことができるので、他の要素と横並びに表示することができる。

  • display:inline-block

    対象の要素をインラインのように横並びに表示し、さらにそれぞれの要素に高さや横幅も指定することができる。

position:absolute, relative, fixed, static
  • position:absolute

    ボックス要素を絶対位置へ配置。position:absoluteが指定された要素は他の要素との関係は切り離されて全くの別物になる。
    position:absoluteには必ず親要素がいることに注意。
    親にしたい要素にposition:relativeかfixedを指定し、その中に子要素を入れてposition:absoluteを指定する。 br>top,bottom, left, rightは親要素との距離で、親要素を指定しなかった場合は勝手にブラウザが親要素になる。

  • position:relative

    相対位置での配置。本来表示されるべき位置からずらして表示できる。

  • position:fixed

    固定位置での配置。
    画面の一部を固定させ、それ以外の部分のみスクロールするように作ることが出来る。

  • position:static

    初期値。上記三つの設定を解除したいときに使う。

Java Scriptのコード(サイドバー部分)

var $aside = $('.page-main > aside');
        var $asidButton = $aside.find('button')
            .on('click', function(){
                $aside.toggleClass('open');
                if($aside.hasClass('open')){
                    $aside.stop(true).animate({left: '-90px'}, duration, 'easeOutBack'); //❶
                    $asidButton.find('img').attr('src', 'close.png');//❷
                }else{
                    $aside.stop(true).animate({left: '-350px'}, duration, 'easeInBack');
                    $asidButton.find('img').attr('src', 'open.png');
                };
            });
  • CSSで指定したサイドバーのleftを操作することでサイドバーの開け閉めをする。(❶)

toggleClass()･･･このメソッドは引数に指定されたクラス名(文字列)が、jQueryオブジェクト内の要素のclass属性に指定されているかを確認し、指定されていない場合は追加し、すでに指定されている場合は削除する。

hasClass()･･･このメソッドは引数に渡したクラス名(文字列)が、対象要素のclass属性に含まれていればtrueを返し、含まれていなければfalseを返す。

attr()･･･要素の属性値の取得または属性値の設定を行うメソッド。

attr(属性名); //jQueryオブジェクトは返らない
attr(属性名, 値); //jQueryオブジェクトが返る

animateメソッドで開いた状態までアニメーションさせた後、attr('src', 'close.png');を実行することで閉めるボタンに変更している。(❷)

filter()メソッドとfind()メソッドの違い

参考サイトfilter()とfind()の違い

参考サイト一覧
display:inline, block, inline-blockの使い方とサンプル
jQuery最高の教科書 | 株式会社シフトブレイン 著