tab css style タブメニューのCSS

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

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

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

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

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

html

CSS【1】

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

tab style  example1

DEMO

Stylesheet

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

CSS【2】 float の場合

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

tab style  example2

DEMO

stylesheet

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

 

SNSでもご購読できます。