タブメニュー

賢威8ではあらかじめ簡単なタブメニューを実装できるようになっています。

タブメニューは情報をコンパクトにまとめるのに便利ですが、検索エンジンはページにアクセスした際に初めから表示されているコンテンツと非表示のコンテンツでは、非表示のコンテンツの評価を相対的に低くする傾向があります。
重要なコンテンツは最初から表示しておくようにしましょう。

コンテンツ1が入ります。
コンテンツ1が入ります。
コンテンツ2が入ります。
コンテンツ2が入ります。
コンテンツ3が入ります。
コンテンツ3が入ります。

<div class="tab-box">
	<ul class="tab-menu">
		<li class="tab-menu_select"><div><span>メニュー1メニュー1メニュー1メニュー1メニュー1メニュー1</span></div></li>
		<li><div><span>メニュー2</span></div></li>
		<li><div><span>メニュー3</span></div></li>
	</ul>
	<ul class="tab-conts">
		<li>
			コンテンツ1が入ります。コンテンツ1が入ります。
		</li>
		<li>
			コンテンツ2が入ります。コンテンツ2が入ります。
		</li>
		<li>
			コンテンツ3が入ります。コンテンツ3が入ります。
		</li>
	</ul>
</div>

</ul>

<li>

コンテンツ1が入ります。コンテンツ1が入ります。

</li>

<li>

コンテンツ2が入ります。コンテンツ2が入ります。

</li>

<li>

コンテンツ3が入ります。コンテンツ3が入ります。

</li>

</ul>

</div>

なお、タブの数は3つ限定ではなく、liタグの数を増減させることで調整ができます。

コンテンツ1が入ります。
コンテンツ1が入ります。
コンテンツ2が入ります。
コンテンツ2が入ります。
コンテンツ3が入ります。
コンテンツ3が入ります。
コンテンツ4が入ります。
コンテンツ4が入ります。

<div class="tab-box">
	<ul class="tab-menu">
		<li class="tab-menu_select"><div><span>メニュー1</span></div></li>
		<li><div><span>メニュー2</span></div></li>
		<li><div><span>メニュー3</span></div></li>
		<li><div><span>メニュー4</span></div></li>
	</ul>
	<ul class="tab-conts">
		<li>
			コンテンツ1が入ります。コンテンツ1が入ります。
		</li>
		<li>
			コンテンツ2が入ります。コンテンツ2が入ります。
		</li>
		<li>
			コンテンツ3が入ります。コンテンツ3が入ります。
		</li>
		<li>
			コンテンツ4が入ります。コンテンツ4が入ります。
		</li>
	</ul>
</div>