販促レポート：＜HTML＞シンプルでサクサク動作するタブメニュー｜販促ノベルティ卸売りセンター[スマホ版]

販促レポート

2013/10/12　IT技術テク

＜HTML＞シンプルでサクサク動作するタブメニュー

当サイトのトップページ（PC版、スマホ版）でも採用している、超軽量でサクサク動作するタブメニューをご紹介します。シンプルな構造なうえとても簡単に実装できるので、たくさんの情報を切り分けてスマートに表示したいWEBサイトにはおススメです。

サンプルページを見る
サンプルをダウンロード

＜準備＞

<link type="text/css" rel="stylesheet" href="SpryTabbedPanels.css" />

<script type="text/javascript" src="SpryTabbedPanels.js"></script>

※<head>～</head>に「SpryTabbedPanels.css」と「SpryTabbedPanels.js」のパスを指定

＜HTMLソース＞

<div class="TabbedPanels" id="tabPanel">

		<ul class="TabbedPanelsTabGroup">

		<li class="TabbedPanelsTab" tabindex="0">コンテンツA</li>

		<li class="TabbedPanelsTab" tabindex="0">コンテンツB</li>

		<li class="TabbedPanelsTab" tabindex="0">コンテンツC</li>

		</ul>

		<div class="TabbedPanelsContentGroup">

			<div class="TabbedPanelsContent">

			<p>コンテンツAのタイトル</p>

			<p>コンテンツAの記事</p>

			<p>コンテンツAの記事</p>

			<p>コンテンツAの記事</p>

			<p><a href="#">コンテンツAのリンク</a></p>

			</div>

		<div class="TabbedPanelsContent">

			<p>コンテンツBのタイトル</p>

			<p>コンテンツBの記事</p>

			<p>コンテンツBの記事</p>

			<p>コンテンツBの記事</p>

			<p><a href="#">コンテンツBのリンク</a></p>			

		</div>

		<div class="TabbedPanelsContent">

			<p>コンテンツCのタイトル</p>

			<p>コンテンツCの記事</p>

			<p>コンテンツCの記事</p>

			<p>コンテンツCの記事</p>

			<p><a href="#">コンテンツCのリンク</a></p>			

		</div>

		</div>

	</div>

	<script type="text/javascript">

	new Spry.Widget.TabbedPanels("tabPanel", {defaultTab:0});

	</script>

＜CSSソース＞

.TabbedPanels {

	padding: 0px;

	clear: both;

	margin-top: 20px;

	margin-bottom: 20px;

	width: 500px;

}



.TabbedPanelsTabGroup {

	margin: 0px;

	padding: 0px;

}



.TabbedPanelsTab {

	position: relative;

	top: 1px;

	float: left;

	background-color: #EAEAEA;

	list-style: none;

	-moz-user-select: none;

	-khtml-user-select: none;

	cursor: pointer;

	border: 1px solid #CCCCCC;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 13px;

	margin-top: 0px;

	margin-right: 1px;

	margin-bottom: 0px;

	margin-left: 0px;

	color: #000000;

	outline:none;

	text-align: center;

	padding: 10px;

}



.TabbedPanelsTabHover {

	background-color: #DDDDDD;

}



.TabbedPanelsTabSelected {

	background-color: #FFFFFF;

	border-bottom: 1px solid #FFFFFF;

}



.TabbedPanelsTab a {

	color: #000000;

	text-decoration: none;

}



.TabbedPanelsContentGroup {

	clear: both;

	border-left: solid 1px #CCCCCC;

	border-bottom: solid 1px #CCCCCC;

	border-top: solid 1px #CCCCCC;

	border-right: solid 1px #CCCCCC;

	background-color: #FFFFFF;

	padding: 15px;

}



.TabbedPanelsContent {

	padding: 0px;

}



.TabbedPanelsContentVisible {

}