［HTML/ CSS/ JavaScript/ jQuery］課題サイト「Kitchen Club」

jQueryを使用してアコーディオンメニューを実現した課題サイト「Kitchen Club」です。

このサイトのポイント

1. ナビゲーションがjQueryでアコーディオンメニューになっている
2. ナビゲーションにマウスオンすると画像が変化する
3. 商品画像のシャドウ

１．アコーディオンを実現するためのjQueryの記述は複数ありますが、私は２通り作りました。

① .slideDown・.slideUpバージョン
$(function(){
　$ ('#nav dd').css('display','none');
　　$('#nav dt:eq(2)').click(function(){
　　$('#nav dd:not(:visible)').slideDown(500);
　　});
　$('#nav dt:not(:eq(2))').click(function(){
　$('#nav dd:visible').slideUp(500);
　});
});

② .slideToggleバージョン
$(function(){
　　$('#nav dt:eq(2)').click(function(){
　　$('#nav dd:not(:animated)').slideToggle(500);
　　});
});

２．マウスオンすると色が変化するナビゲーション

これはjQueryではなく、JavaScriptのmouseover/ mouseoutを使用しています。

３．商品画像のシャドウ

CSSによるもの。