今日の人気記事

  1. 簡単にドロップダウンメニューがつくれる「Superfish」
  2. マウスオーバーで画像を拡大(ズーム)「EasyZoom」
  3. 現在時刻も表示できるカウントダウン・タイマー「countdownTimer」
  4. バーチャルキーボードを実装「Keyboard」
  5. 複数のpdfファイルをWebサイトに「pdfSlider」 - jQueryプラグイン

クリック操作で開閉する左右のサイドパネル「Panel Slider」

スポンサーリンク

クリック操作で開閉する左右のサイドパネルを実装するプラグイン「Panel Slider」を紹介します。

jQueryプラグイン「Panel Slider」

このプラグインを使えば、クリック操作で開閉する左右のサイドパネル(アニメ効果付き)を簡単に実装することができます。

オプションでは、パネルを開く(閉じる)アニメーションの速度やパネルを閉じるときのアクションを指定することができます。

スポンサーリンク

それでは、デモページのパネルを開閉してみてください。

「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>
スポンサーリンク

関連記事(一部広告含む)