水平・垂直のどちらにもタブ設置可のコンテンツを実装「Vertical Tabs」
当ページのリンクには広告が含まれています。
スポンサーリンク
水平・垂直のどちらにもタブを設置できるタブコンテンツを実装するプラグイン「Vertical Tabs」を紹介します。
jQueryプラグイン「Vertical Tabs」
このプラグインを使えば、水平（コンテンツの上部）と垂直（コンテンツの左側）のどちらにも簡単にタブメニューを設置することができます。
Webサイトに表示できるコンテンツの大きさは限られています。そのため、タブを使ってユーザーが見やすいようにコンテンツを整理したい！といった場合には、このプラグインを使用するのがいいかもしれませんね。
スポンサーリンク
デモページのタブコンテンツをご覧ください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Vertical Tabs のデモでーす。">
<title>Vertical Tabs - jQueryプラグイン</title>
<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="css/vertical-tabs.css">
</head>
<body>
<h1>Vertical Tabs のデモでーす。</h1>
<h2>垂直にタブを設置</h2>
<div id="demo1">
<ul>
<li><a href="#one">タブ 1.</a></li>
<li><a href="#two">タブ 2.</a></li>
<li><a href="#three">タブ 3.</a></li>
</ul>
<div id="one">コンテンツ 1.</div>
<div id="two">コンテンツ 2.</div>
<div id="three">コンテンツ 3.</div>
</div>
<h2>水平にタブを設置</h2>
<div id="demo2">
<ul>
<li><a href="#one">タブ 1.</a></li>
<li><a href="#two">タブ 2.</a></li>
<li><a href="#three">タブ 3.</a></li>
<li><a href="#four">タブ 4.</a></li>
<li><a href="#five">タブ 5.</a></li>
</ul>
<div id="one">コンテンツ 1.</div>
<div id="two">コンテンツ 2.</div>
<div id="three">コンテンツ 3.</div>
<div id="four">コンテンツ 4.</div>
<div id="five">コンテンツ 5.</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="js/vertical-tabs.js"></script>
<script>
$( "#demo1" ).tabs({ orientation: "horizontal" });
$( "#demo2" ).tabs({ orientation: "vertical" });
</script>
</body>
</html>
スポンサーリンク