今日の人気記事

  1. フォントサイズを変更「Text Resizer」
  2. 指定した要素を上下左右にスクロール「Marquee」
  3. アプリのようにスライドするレスポンシブメニュー「mmenu」
  4. select要素を検索できるように「Chosen」
  5. 同じ内容の入力フォームを追加・削除「Repeater」

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

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