[JS]タブ式メニューとアコーディオンをつかったサンプル

[JS]タブ式メニューとアコーディオンをつかったサンプル

昨日紹介しましたアコーディオンとタブの切替を使ったサンプルを作ってみました。

この前紹介したyuga.jsにはタブの切替機能もついていますので、自分はいつもこのyuga.jsの機能を使ってやっていますので、それの使い方など簡単な解説をしておきたいと思います。

demo page

…ここからが続き

デモページの解説

XHTML

<ul class="tabNav">
<li><a href="#tab1">メニュー 1 </a></li>
<li><a href="#tab2">メニュー 2</a></li>
<li><a href="#tab3">メニュー 3</a></li>
</ul>

<div class="tabContents">
<div id="tab1">
<dl class="navi">
<dt>メニュー 1 の質問内容</dt>
<dd>メニュー 1 の質問に対する答え。</dd>
<dt>メニュー 1 の質問内容</dt>
<dd>メニュー 1 の質問に対する答え。</dd>
<dt>メニュー 1 の質問内容</dt>
<dd>メニュー 1 の質問に対する答え。</dd>
<dt>メニュー 1 の質問内容</dt>
<dd>メニュー 1 の質問に対する答え。</dd>
<dt>メニュー 1 の質問内容</dt>
<dd>メニュー 1 の質問に対する答え。</dd>
<dt>メニュー 1 の質問内容</dt>
<dd>メニュー 1 の質問に対する答え。</dd>
</dl>
<!--/ #tab1--></div>

<div id="tab2">
<dl class="navi">
<dt>メニュー 2 の質問内容</dt>
<dd>メニュー 2 の質問に対する答え。</dd>
<dt>メニュー 2 の質問内容</dt>
<dd>メニュー 2 の質問に対する答え。</dd>
<dt>メニュー 2 の質問内容</dt>
<dd>メニュー 2 の質問に対する答え。</dd>
<dt>メニュー 2 の質問内容</dt>
<dd>メニュー 2 の質問に対する答え。</dd>
<dt>メニュー 2 の質問内容</dt>
<dd>メニュー 2 の質問に対する答え。</dd>
<dt>メニュー 2 の質問内容</dt>
<dd>メニュー 2 の質問に対する答え。</dd>
</dl>
<!--/ #tab2--></div>

<div id="tab3">
<dl class="navi">
<dt>メニュー 3 の質問内容</dt>
<dd>メニュー 3 の質問に対する答え。</dd>
<dt>メニュー 3 の質問内容</dt>
<dd>メニュー 3 の質問に対する答え。</dd>
<dt>メニュー 3 の質問内容</dt>
<dd>メニュー 3 の質問に対する答え。</dd>
<dt>メニュー 3 の質問内容</dt>
<dd>メニュー 3 の質問に対する答え。</dd>
<dt>メニュー 3 の質問内容</dt>
<dd>メニュー 3 の質問に対する答え。</dd>
<dt>メニュー 3 の質問内容</dt>
<dd>メニュー 3 の質問に対する答え。</dd>
</dl>
<!--/ #tab3--></div>

<!--/ .tabContents--></div>

画像にしてみるとこんな感じです。
XHTML

CSS

.tabNav	{
	width: 100%;
	
}
.tabNav li	{
	float: left;
	margin: 0 5px -1px;
	font-weight: bold;
	text-align: center;
}
.tabNav a	{
	display: block;
	width: 80px;
	padding: 5px 10px;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
	color: #333;
}
.tabNav a.active	{
	border-bottom: 1px solid #FFF;
}
.tabContents	{
	clear: both;
	padding: 10px;
	border: 1px solid #CCC;
	margin-bottom: 30px;W
}
.tabContents dl	{
	margin-bottom: 15px;
}
.tabContents dt	{
	background: url(../images/q.gif) no-repeat 5px 8px;
	padding: 8px 5px 8px 30px;
	font-weight: bold;
}
.tabContents dd	{
	background: url(../images/a.gif) no-repeat 5px 8px;
	padding: 8px 5px 8px 30px;
	margin-bottom: 5px;
	border-bottom: 1px dotted #CCC;
}

※現在開いてるタブのa要素に「class="active"」が付くようになっています。

Comments

ゆう

ゆう

こんばんは。クリックして他の要素が開いたら既に開いている要素を閉じるにはどのようにすればいいでしょうか?

2010年04月29日 00:46

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article