まだデータがありません。
クリック操作で開閉する左右のサイドパネル「Panel Slider」
当ページのリンクには広告が含まれています。
スポンサーリンク
クリック操作で開閉する左右のサイドパネルを実装するプラグイン「Panel Slider」を紹介します。
jQueryプラグイン「Panel Slider」
このプラグインを使えば、クリック操作で開閉する左右のサイドパネル（アニメ効果付き）を簡単に実装することができます。
オプションでは、パネルを開く（閉じる）アニメーションの速度やパネルを閉じるときのアクションを指定することができます。
スポンサーリンク
それでは、デモページのパネルを開閉してみてください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Panel sliderのデモでーす。">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Panel slider - jQueryプラグイン</title>
<style type="text/css">
#contents {
width: 940px;
height: 400px;
margin: 0 auto; background: white; }
.panel {
display: none;
width: 220px;
padding: 20px;
background-color: #333;
color: #fff;
box-shadow: inset 0 0 5px 5px #222;
}
</style>
</head>
<body>
<div id="contents">
<h1>Panel slider example</h1>
<ul>
<li><a id="left-panel-link" href="#left-panel">左のサイドパネルを開閉</a></li>
<li><a id="right-panel-link" href="#right-panel">右のサイドパネルを開閉</a></li>
</ul>
</div>
<div id="left-panel" class="panel">
<h2>左のサイドパネル</h2>
<p>パネルの外をクリックすると、このパネルは閉じます。</p>
</div>
<div id="right-panel" class="panel">
<h2>右のサイドパネル</h2>
<p>パネルの外をクリックすると、このパネルは閉じます。</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.panelslider.min.js"></script>
<script>
$('#left-panel-link').panelslider();
$('#right-panel-link').panelslider({side: 'right'});
</script>
</body>
</html>
スポンサーリンク