CSSだけでタブメニューによるコンテンツ切り替えを実現する方法

SPONSORED LINK

Pocket

これ、個人的に知らなかったのですが、有名な手法なんですかね?CSSだけでタブメニューを作れちゃう、というテクニックです。

JavaScriptで表示・非表示を切り替えるというのが定石だと思うのですが、JSが使えない時に便利かもですね。Opera用にちょっとしたHackが必要ですが、覚えておくと便利そうですな。

css

↑ CSSだけでタブメニューによるコンテンツ切り替えが可能です。

デモを見た方が早いかな・・・。

» DEMO: My very nice CSS tabbed portfolio

ソースを見ればなんとなくわかると思いますが、解説はこちら。

» Tabbed CSS only website template | Web development blog of Tibor Szász

ツイッターもやっています!

SPONSORED LINK

    • こっつん
    • March 15th, 2010

    IE7でしか見てないですが、ブラウザのサイズを
    小さくしてスクロールバーを出した状態でタブを
    クリックするとバグりますね。。

  1. No trackbacks yet.