tab css style タブメニューのCSS



コンテンツを効率的にレイアウトしたいときにタブを使ってレイアウトすることはよく有ります。

そんな時にCSS+javascript で実装するサンプル

javascript は Yetii (ちょっと古いけど使いやすいので)を使います。

Yetii
http://www.kminek.pl/lab/yetii

Yetiiの設置については後日改めて。今回はCSSでのレイアウトを。

html

<div class="wrap">
	<div class="tab-container" id="tab-container">
		<ul class="tab" id="tab-container-nav">
			<li><a href="#tab1">Tab 1</a></li>
			<li><a href="#tab2">Tab 2</a></li>
			<li><a href="#tab3">Tab 3</a></li>
			<li><a href="#tab4">Tab 4</a></li>
		</ul>
		<div class="tab-content" id="tab1">
			<h2>タブ1 コンテンツ</h2>
			<div>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
		</div>
		<div class="tab-content" id="tab2">
			<h2>タブ2 コンテンツ</h2>
			<div>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
		</div>
		<div class="tab-content" id="tab3">
			<h2>タブ3 コンテンツ</h2>
			<div>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
		</div>
		<div class="tab-content" id="tab4">
			<h2>タブ4 コンテンツ</h2>
			<div>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
		</div>
	</div>


</div><!-- /#wrap -->

CSS【1】

タブの周りをラインで囲み、アクティブなタブが全面にくるようなイメージです。

tab style  example1

DEMO

Stylesheet

.tab-container{
	margin:20px auto;
	width:800px;
}
ul.tab{
	margin:0;
	padding: 3px 0;
	list-style: none;
	border-bottom: 1px solid #ccc;
}
ul.tab li{
	display: inline;
	margin:0 4px 0 0;
}
ul.tab li a{
	padding:5px 8px 3px;
	color:#c33;
	text-decoration: none;
	background: #eee;
	border-left:1px solid #ccc;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
}
ul.tab li a:hover,
ul.tab li.activeli a{
	padding:5px 8px 3px;
	color:#c33;
	background:#fff;
	border-bottom:1px solid #fff;
}
.tab-content{
	padding:30px;
	border:1px solid #ccc;
	border-top:none;
}

リストの横並びは、display:inline で対応します。floatだと余分なスペースができてうまく行かなかったので。

CSS【2】 float の場合

ラインを使わず、塗りつぶす感じならfloat でもいい感じになります。

tab style  example2

DEMO

stylesheet

.tab-container{
	margin:20px auto;
	width:800px;
}
ul.tab{
	margin:0;
	padding:0; /* 0にした方が隙間あかない */
	list-style: none;
}
/* clearfix */
ul.tab:before,
ul.tab:after{
	display: table;
	content:"";
}
ul.tab:after{
	clear: both;
}
ul.tab li{
	float: left;
	margin:0 4px 0 0;
}
ul.tab li a{
	display: block;
	padding: 5px .3em;
	background: #a0bd9b;
	border-radius: 4px 4px 0 0;
	color: #eee;
	font-size: 13px;
	text-decoration: none;
}
ul.tab li a:hover,
ul.tab li.activeli a{
	background: #efefef;
	color: #2cbf13;
}
.tab-content{
	padding:30px;
	background: #efefef;
}

基本的なタブスタイルでした。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする