ResponsiveTab.js

レスポンシブWebデザインに最適化されたタブメニューを実現するためのJavascriptです。CSS3のTransitionを使うことでアニメーションを付与したタブメニューも実現ができます。もちろんスマートフォンにも対応。

ResponsiveTab.jsの概要

レスポンシブWebデザインに対応したタブメニュー用のJavascriptです。すべての設定はCSSとHTML側で行い、Javascript側には特に設定項目はありません。head内で該当Javascriptを読み込むだけでOK。 タブ部分はsectionに付けられたtitle属性から自動生成する仕組みになっており、HTMLをクリーンで適正に保ちつつもタブメニューを実現可能な仕様になっております。

スマートフォンなどの描画領域の少ないデバイスでタブメニューは効果的な表現方法ですので、レスポンシブWebデザインに対応したResponsiveTab.jsをぜひご利用ください。

ResponsiveTab.jsの機能

headで呼び出すだけですぐ実装可能
head内でスクリプトを呼び出すだけで、該当部分をタブ化します。難しい設定や面倒な設定は一切不要。簡単にタブメニューをPCやスマートフォンに実装することができます。
CSS3によるアニメーションに対応
classNameを変更する仕様のスクリプトのため、CSS3のtransitionに対応しているブラウザであればアニメーションをかけることができます。アニメーションするタブメニューっていいね!
ラベル(タブ)を自動生成
タブメニューのタブの部分を自動生成します。sectionタグのtitle属性を拾ってタブメニュー用のタグをJavascriptから自動的に追加する仕組みのためHTMLタグ内に無駄なタグが生まれません。
IE6などのレガシーブラウザにも対応
IE6などのいわゆるレガシーブラウザにも対応しています。いわゆるプログレッシブ・エンハンスメントってやつですかね。CSS3のTransitionなどは利用できませんが、単純なタブ切り替えとしては動作するので。

デモサイト

https://lab.synck.com/ResponsiveTab.js/example.html

最新版を無料ダウンロード

ResponsiveTab.jsの更新履歴

更新日 バージョン 更新内容
2013-11-22 1.0.0 ResponsiveTab.jsの公開第1弾。

コメント欄