今回はスライドメニューを実装してみた。
スライドバーは右端に配置し、メニューは隠れている。
スライドバーにカーソルを合わせると、左にスライドしメニューが表示されます。
カーソルを外すと、右にスライドし、メニューが隠れます。
ソース
いつものように、ソースを載せます。
slide_practice.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スライド 練習</title>
<link rel="stylesheet" href="slide.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function() {
$('#slide_bar').hover(
// スライドバーにカーソルを合わせると、左にスライドし、メニューが現れる
function(){
$(this).animate({'marginRight':'170px'},500);
},
// 合わせていなければ、メニューが隠れる
function () {
$(this).animate({'marginRight':'0'},500);
}
);
});
</script>
</head>
<body>
<div id="slide_bar">
<ul>
<li><a href="#">スライド1</a></li>
<li><a href="#">スライド2</a></li>
<li><a href="#">スライド3</a></li>
<li><a href="#">スライド4</a></li>
</ul>
</div>
</body>
</html>
slide.css
#slide_bar {
margin: 0;
padding: 0;
background: #f00;
position: fixed;
right: -170px;
cursor: pointer;
width: 200px;
}
#slide_bar ul {
margin: 0;
padding-left: 30px;
list-style: none;
}
#slide_bar li {
margin: 5px;
padding: 0;
}
#slide_bar a {
margin: 0;
padding: 0;
text-decoration: none;
color: white;
}
解説
大事なポイントは、以下のコードです。
$(function() {
$('#slide_bar').hover(
// スライドバーにカーソルを合わせると、左にスライドし、メニューが現れる
function(){
$(this).animate({'marginRight':'170px'},500);
},
// 合わせていなければ、メニューが隠れる
function () {
$(this).animate({'marginRight':'0'},500);
}
);
});
hover
メソッドとanimate
メソッドを使っている。
hover
を使うことで、カーソルがスライドバーにあっている場合とはずれている場合の動作を指定できます。
第1引数にはカーソルがある場合の処理、第2引数には外れているときの処理を指定します。
animate
でスライドアニメーションを実現しています。
下記は500ミリ秒かけて、要素の右側のマージンを0にするコードです。
animate({'marginRight':'0'},500)
第1引数にはCSS
のプロパティを設定します。
このとき注意すべきは、プロバティをキャメルケースで記述することです。
CSS
ではmargin-right
ですが、animate
メソッドの中ではキャメルケースで記述しなければならない。
第2引数には、アニメーションの時間を指定します。
参考資料
jQuery-メニューやコンテンツをスライドさせて表示する
jQueryのanimateで自由にアニメーションできるようになろう