みなさん、お久しぶりです。気が付けば最後の更新から1か月半。だいぶ更新してないと思い、こないだ仕事で実装したタブ切り替えメニューをご紹介します。

まずはDEMOから。
DEMO①

mainArea内のdivの中身はご自由にどうぞ。

HTML

CSS

jQuery

○コード解説
メニューと下の表示エリアのid名の数字をいっしょにすることで、for文で操作しやすくしています。
表示しているメニューをクリックしてもフェードアニメーションが発生したので、currentというクラス名をつけて、条件分岐させています。slideとかにしてもおもしろい動きになるかも。

次回はドロップダウンメニューの予定。いつになることやら・・・。