作るもの
- メニューであるanchorタグにカーソルを合わせると，説明が右からスライドインしてくる．
- できればリンククリックで飛びたい．
- こんなの
実装のまえに
考え方
- はじめに説明を画面右の外側に移動させて非表示にしておく
- hover時に説明を再表示して
.animate()を用いて右からスライドイン． - unhover時に
.animate()を用いて右へスライドアウトして非表示に． - リサイズで見きれないよう，リサイズイベントで常に右外側に表示させる．
使うAPI
-
.animate(param, [duration], [easing], [callback])- アニメーションで位置やサイズを変更
- jQuery日本語リファレンス様
-
$(window).width();- ウィンドウサイズを取得可能．
-
.offset()- セレクタの現在位置取得やセットが可能．
ソースコード
HTML
HTMLソースコード
HTML
<html>
<body>
<div id="slideinmenu">
<div id="slidein1">
<span class="menu">
<a href="#slidein1">Menu1</a>
</span>
<span class="content">
content
</span>
</div>
<div id="slidein2">
<span class="menu">
<a href="#slidein2">Menu2</a>
</span>
<span class="content">
content2
</span>
</div>
<div id="slidein3">
<span class="menu">
<a href="#slidein3">Meeeenu3</a>
</span>
<span class="content">
content3
</span>
</div>
</div>
</body>
</html>
構造
階層構造を書くと，こんな感じ
- html
- body
- div#slideinmenu
- div#slidein1
- span.menu(タイトル1)
- span.content(コンテンツ1)
- div#slidein2
- span.menu(タイトル2)
- span.content(コンテンツ2)
- div#slidein3
- span.menu(タイトル3)
- span.content(コンテンツ3)
- div#slidein1
- div#slideinmenu
- body
jQuery
ウィンドウリサイズ時の処理
ウィンドウリサイズのイベントにより実行される処理は次のように記述する．
jQuery
$(window).on('resize', function(){
// リサイズ時の処理
});
-
$(window).on('load resize', func);のように書けば，リソースのロード完了後とリサイズ時に実行される．
スライドインメニューの実装
jQuery
// window.onload + window.onresize の処理
$(window).on('load resize', function(){
$('#slideinmenu .content').show().offset(
{'left': $(window).width()+10}
).hide();
});
// document.ready時の処理
$(document).ready(function(){
// anchorタグクリック時の画面遷移を中断
$('#slideinmenu a').click(function(){
return false;
});
// スライドインメニュー処理
$('#slideinmenu a').hover(
function(){
$(this.hash).children('.content')
.stop().show()
.animate(
{left: 0},
300
);
},
function(){
$(this.hash)
.children('.content')
.stop()
.animate(
{left: $(window).width()+10},
300,
function(){
$(this).hide();
}
);
}
);
});
2015/1/4 01:40 追記
説明を右外側にスライドアウトしただけではスクロールで見えてしまうので，右外側に隠した後にhide()で非表示に．
また，offset()で設定できるのは可視要素のみなので，リサイズ時には「可視化→移動→不可視化」として移動するため，.show().offset().hide()としている．
ソースコード（これだけで動く）
上記HTMLコードとjQueryコードをまとめただけ．
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
<!--
// window.onload + window.onresize の処理
$(window).on('load resize', function(){
$('#slideinmenu .content').show().offset(
{'left': $(window).width()+10}
).hide();
});
// document.ready時の処理
$(document).ready(function(){
// anchorタグクリック時の画面遷移を中断
$('#slideinmenu a').click(function(){
return false;
});
// スライドインメニュー処理
$('#slideinmenu a').hover(
function(){
$(this.hash).children('.content')
.stop().show()
.animate(
{left: 0},
300
);
},
function(){
$(this.hash)
.children('.content')
.stop()
.animate(
{left: $(window).width()+10},
300,
function(){
$(this).hide();
}
);
}
);
});
-->
</script>
</head>
<body>
<div id="slideinmenu">
<div id="slidin1">
<span class="menu">
<a href="#slidin1">Menu1</a>
</span>
<span class="content">
content
</span>
</div>
<div id="slidin2">
<span class="menu">
<a href="#slidin2">Menu2</a>
</span>
<span class="content">
content2
</span>
</div>
<div id="slidin3">
<span class="menu">
<a href="#slidin3">Meeeenu3</a>
</span>
<span class="content">
content3
</span>
</div>
</div>
</body>
</html>
まとめ
今回のキモは，リサイズ（+ onload）時の処理だろうか．これを記述すればリサイズのたびに呼ばれるので，見切れることがない．（ただし，アニメーション処理中のことも考慮すべきだろうか？）
以下メモ
リンク先への遷移を可能にするには，
hrefをsplit('#')[0]でいけるか？