今日の人気記事

  1. Tableカラム(列)にソート機能を追加「Tablesorter」
  2. 水平・垂直スクロースのシングルページを実装「fullPage.js」
  3. select要素の複数選択フォームを実装「Multiple Select」
  4. 指定した位置までスクロールするとスライドするパネル「ScrollSlide」
  5. 横幅いっぱいの画像スライダー「full width image slider」

左右にスクロールできるタブメニュー「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>
スポンサーリンク

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