左右にスクロールできるタブメニュー「ScrollTabs」
当ページのリンクには広告が含まれています。
スポンサーリンク
左右にスクロールできるタブメニューを実装するプラグイン「ScrollTabs」を紹介します。
jQueryプラグイン「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>
スポンサーリンク