みなさん、お久しぶりです。気が付けば最後の更新から1か月半。だいぶ更新してないと思い、こないだ仕事で実装したタブ切り替えメニューをご紹介します。
まずはDEMOから。
DEMO①
mainArea内のdivの中身はご自由にどうぞ。
HTML
CSS
jQuery
○コード解説
メニューと下の表示エリアのid名の数字をいっしょにすることで、for文で操作しやすくしています。
表示しているメニューをクリックしてもフェードアニメーションが発生したので、currentというクラス名をつけて、条件分岐させています。slideとかにしてもおもしろい動きになるかも。
次回はドロップダウンメニューの予定。いつになることやら・・・。