今日の人気記事

  1. 追尾型(オーバーレイ)広告を表示「Meerkat」
  2. Google Mapsの地図を簡単に表示「jQuery Google Map」
  3. 横方向のスライダー「Scrollyeah」
  4. JSONデータからテーブルを表示「Columns」 - ソート - 検索 - ページャー
  5. 画像に拡大・縮小ボタンを「Zoomer」

左右にスクロールできるタブメニュー「ScrollTabs」

スポンサーリンク

左右にスクロールできるタブメニューを実装するプラグイン「ScrollTabs」を紹介します。

jQueryプラグイン「ScrollTabs」

このプラグインを使えば、マウスを使って左右にスクロールすることのできるタブメニューを実装することができます。しかもレスポンシブ対応です。

オプションを使えば、これらのタブを追加・削除することもできます。

スポンサーリンク

それではデモページのタブメニューをご覧ください。

「ScrollTabs」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="ScrollTabs のデモでーす。">
<title>ScrollTabs - jQueryプラグイン</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/scrolltabs.css">
</head>
<body>
<h1>ScrollTabs</h1>

<div id="demo" class="scroll_tabs_theme_light">
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
<span>タブ</span>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.scrolltabs.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script>
$(document).ready(function(){
  $('#demo').scrollTabs();
});
</script>
</body>
</html>
スポンサーリンク

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