inakagawa/README.md

## README.md

      
    Raw
  

              README.md
            
          
    簡単なものから練習。
html側(js) でやってること

animate({width:toggle})
$(this).toggleClass('peke')


drawrクラス: 引き出しアニメーションさせる
btnクラス: peke クラスを付けたり外したりする（見た目）
animate() の引数に {width:'toggle'} を与えることで、横方向に出したり隠したりする

css側: チェックすること

ボタン


ボタン画像を位置で表示切り替え
通常: position, top, right
ペケ状態: background-position をずらす
Z-index: 200

ドロワー


初期状態: display:none
出てくると、黒＋アルファ0.6
Z-index: 100 (ボタンより後ろ)

jQueryの命令メモ

http://api.jquery.com/animate/
animate(properties)


properties: CSS属性値を書いたjsオブジェクト。この値に向かってアニメーションする


## index.html
<!DOCTYPE html>
<html lang="ja">
<!--
see.「10行でできる ドロワーメニューの作り方」
https://narugaro.wordpress.com/2015/04/09/%E3%81%9F%E3%81%A3%E3%81%9F10%E8%A1%8C%E3%81%A7%E3%81%A7%E3%81%8D%E3%82%8B%EF%BC%81%E3%83%89%E3%83%AD%E3%83%AF%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9/

-->

<head>
	<meta charset="UTF-8">
	<script src="jquery-2.1.4.min.js"></script>
	<link rel="stylesheet" href="style.css">
	<title>hamburger</title>
</head>
<body>
<a class="btn"></a>
<div class="drawr">
    <ul id="menu">
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
    <li><a href="#">メニュー4</a></li>
    <li><a href="#">メニュー5</a></li>
    </ul>
</div>

<script>
$(function($) {
    WindowHeight = $(window).height();
    $('.drawr').css('height', WindowHeight); //メニューをWindowの高さいっぱいにする
    $(document).ready(function() {
        $('.btn').click(function(){ //クリックしたら
            $('.drawr').animate({width:'toggle'}); //animateで表示・非表示
            $(this).toggleClass('peke'); //toggleでクラス追加・削除
        });
    });
});
</script>
</body>
</html>

## style.css
/*style.css*/

.btn {
    background:transparent url(h2btn.png) no-repeat 0 0;
    display: block;
    width:35px;
    height: 35px;
    position: absolute;
    top:20px;
    right:20px;
    cursor: pointer;
    z-index: 200;
}
.peke {
    background-position: -35px 0;
}
.drawr {
    display: none;
    background-color:rgba(0,0,0,0.6);
    position: absolute;
    top: 0px;
    right:0;
    width:260px;
    padding:60px 0 20px 20px;
    z-index: 100;
}
#menu li {
    width:260px;
}
#menu li a {
    color:#fff;
    display: block;
    padding: 15px;
}
	<!DOCTYPE html>
	<html lang="ja">
	<!--
	see.「10行でできるドロワーメニューの作り方」
	https://narugaro.wordpress.com/2015/04/09/%E3%81%9F%E3%81%A3%E3%81%9F10%E8%A1%8C%E3%81%A7%E3%81%A7%E3%81%8D%E3%82%8B%EF%BC%81%E3%83%89%E3%83%AD%E3%83%AF%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9/

	-->

	<head>
	<meta charset="UTF-8">
	<script src="jquery-2.1.4.min.js"></script>
	<link rel="stylesheet" href="style.css">
	<title>hamburger</title>
	</head>
	<body>
	<a class="btn"></a>
	<div class="drawr">
	<ul id="menu">
	<li><a href="#">メニュー1</a></li>
	<li><a href="#">メニュー2</a></li>
	<li><a href="#">メニュー3</a></li>
	<li><a href="#">メニュー4</a></li>
	<li><a href="#">メニュー5</a></li>
	</ul>
	</div>

	<script>
	$(function($) {
	WindowHeight = $(window).height();
	$('.drawr').css('height', WindowHeight); //メニューをWindowの高さいっぱいにする
	$(document).ready(function() {
	$('.btn').click(function(){ //クリックしたら
	$('.drawr').animate({width:'toggle'}); //animateで表示・非表示
	$(this).toggleClass('peke'); //toggleでクラス追加・削除
	});
	});
	});
	</script>
	</body>
	</html>
	/style.css/

	.btn {
	background:transparent url(h2btn.png) no-repeat 0 0;
	display: block;
	width:35px;
	height: 35px;
	position: absolute;
	top:20px;
	right:20px;
	cursor: pointer;
	z-index: 200;
	}
	.peke {
	background-position: -35px 0;
	}
	.drawr {
	display: none;
	background-color:rgba(0,0,0,0.6);
	position: absolute;
	top: 0px;
	right:0;
	width:260px;
	padding:60px 0 20px 20px;
	z-index: 100;
	}
	#menu li {
	width:260px;
	}
	#menu li a {
	color:#fff;
	display: block;
	padding: 15px;
	}