札幌Web制作のシンクグラフィカ

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の更新履歴