jQueryで表示・非表示サイドバーを作ってみる

今回の内容は、クリック操作によってWebページの左側に格納できるサイドバーを作成します。サンプルコード上に詳細をコメントアウトしました。サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>サイドバーを隠したり、表示したりする</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/ui/jquery-ui.js"></script>

    <style>
        *{margin:0;padding:0;}
        header{background-color:coral;}
        h1{font-family:"メイリオ";}
        li a,button{
            color:white;}

        #sidebar{
            background-color:rgba(0,0,0,0.8);
            width:350px;
            height:100%;
            position:fixed;
            top:0;
            left:-350px;
        }
        #sidebar ul{
            position:absolute;
            top:50px;
            left:80px;
        }
        #sidebar ul li{
            margin:0 0 20px;
            list-style-type:none;
        }
        #sidebar button{
            background-color:rgba(0,0,0,0.8);
            position:absolute;
            top:150px;
            left:350px;
            width:50px;
            height:120px;
            border:none;
            display:block;
        }

    </style>

</head>
<body>
    
<header>
    <h1>サイドメニューを表示したり、隠したりする。</h1>
</header>
    
<div id="sidebar">
    <ul>
        <li><a href="#"><img src="">menu1</a></li>
        <li><a href="#"><img src="">menu2</a></li>
        <li><a href="#"><img src="">menu3</a></li>
    </ul>
    <button><img src="">OPEN</button>
</div>

<script>

$(function(){
    var DURATION = 250;
    
    var $sidebar = $("#sidebar");
    var $btn = $sidebar.find("button")
        .on("click",function(){
            
            /*
            toggleClass()メソッドはｍ
            「引数に指定したクラス名(文字列)が、jQueryオブジェクト内の
            要素のclass属性に指定されているかどうかを見て、
            指定されていない場合は追加し、既に指定済なら削除するメソッド」です。
            */
            $sidebar.toggleClass("open");
            
            /*
            hasclass()メソッドで条件分岐を行っています。
            引数のクラス名(文字列)が、対象の要素に
            含まれいる：true
            含まれていない:false　を返すメソッドです。
            
            ボタンを押したら「div id="sidebar"」にclass="open"を追加してます。
            そうすると、下の条件分岐が行われます。
            
            閉じるときにtoggle("open")が行われると、今度は、
            class="open"は既に追加されているので,class="open"は
            削除され、条件分岐の箇所でfalseが返されelse以降の
            処理が行われます。
            */
            if( $sidebar.hasClass("open") ){
                $sidebar.stop(true).animate({
                    left:"-70px"
                },DURATION,"easeOutBack");
                
                /*
                ボタンの画像を切り替える
                imgタグ内のsrcの属性値を変更する。
                今回は画像は使ってないので""空文字にしてます。
                */
                $btn.find("img")
                .attr("src","");

                //画像を使わない場合はボタンの中のテキストを変更
                $btn.text("CLOSE");
            }else{
                $sidebar.stop(true).animate({
                    left:"-350px"
                },DURATION,"easeInBack");

                /*
                ボタンの画像を切り替える
                imgタグ内のsrcの属性値を変更する。
                今回は画像は使ってないので""空文字にしてます。
                */
                $btn.find("img")
                .attr("src","");

                //画像を使わない場合はボタンの中のテキストを変更
                $btn.text("OPEN");
            };
        });
});
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<!doctype html>

<html>

<head>

<title>サイドバーを隠したり、表示したりする</title>

<style>

*{margin:0;padding:0;}

header{background-color:coral;}

h1{font-family:"メイリオ";}

li a,button{

color:white;}

#sidebar{

background-color:rgba(0,0,0,0.8);

width:350px;

height:100%;

position:fixed;

top:0;

left:-350px;

}

#sidebar ul{

position:absolute;

top:50px;

left:80px;

}

#sidebar ul li{

margin:0 0 20px;

list-style-type:none;

}

#sidebar button{

background-color:rgba(0,0,0,0.8);

position:absolute;

top:150px;

left:350px;

width:50px;

height:120px;

border:none;

display:block;

}

</style>

</head>

<body>

<h1>サイドメニューを表示したり、隠したりする。</h1>

</header>

<ul>

</ul>

</div>

$(function(){

var DURATION = 250;

var $sidebar = $("#sidebar");

var $btn = $sidebar.find("button")

.on("click",function(){

toggleClass()メソッドはｍ

「引数に指定したクラス名(文字列)が、jQueryオブジェクト内の

要素のclass属性に指定されているかどうかを見て、

指定されていない場合は追加し、既に指定済なら削除するメソッド」です。

$sidebar.toggleClass("open");

hasclass()メソッドで条件分岐を行っています。

引数のクラス名(文字列)が、対象の要素に

含まれいる：true

含まれていない:false　を返すメソッドです。

ボタンを押したら「div id="sidebar"」にclass="open"を追加してます。

そうすると、下の条件分岐が行われます。

閉じるときにtoggle("open")が行われると、今度は、

class="open"は既に追加されているので,class="open"は

削除され、条件分岐の箇所でfalseが返されelse以降の

処理が行われます。

if( $sidebar.hasClass("open") ){

$sidebar.stop(true).animate({

left:"-70px"

},DURATION,"easeOutBack");

ボタンの画像を切り替える

imgタグ内のsrcの属性値を変更する。

今回は画像は使ってないので""空文字にしてます。

$btn.find("img")

.attr("src","");

//画像を使わない場合はボタンの中のテキストを変更

$btn.text("CLOSE");

}else{

$sidebar.stop(true).animate({

left:"-350px"

},DURATION,"easeInBack");

ボタンの画像を切り替える

imgタグ内のsrcの属性値を変更する。

今回は画像は使ってないので""空文字にしてます。

$btn.find("img")

.attr("src","");

//画像を使わない場合はボタンの中のテキストを変更

$btn.text("OPEN");

};

});

</script>

</body>

</html>