Elegant Accordion with CSS3


Description: エレガントなアコーディオンメニュー。マウスオーバーでアニメーションスライドし、テキストがフェードインします。css3を併用していますので対応ブラウザは、やや限られます。
Sample: demo
Tutorial: Elegant Accordion with jQuery and CSS3
License: -

Sample

Note

 $(function() {
                $('#accordion > li').hover(
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'480px'},500);
                        $('.heading',$this).stop(true,true).fadeOut();
                        $('.bgDescription',$this).stop(true,true).slideDown(500);
                        $('.description',$this).stop(true,true).fadeIn();
                    },
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'100px'},1000);
                        $('.heading',$this).stop(true,true).fadeIn();
                        $('.description',$this).stop(true,true).fadeOut(500);
                        $('.bgDescription',$this).stop(true,true).slideUp(700);
                    }
                );
            });

かなり軽量となっています。

Related snippet :

  • Description: マウスを乗せるとアイコンが回転しながら開き、コンテンツを表示するメニューを実装します。IEでは回転はしませんが、開閉は可能です。 Samp ...
  • Description: アニメーションしながら縦に開閉するアコーディオン式のパネルです。弾むようなエフェクトが可愛いですね。他のパネルを開くと元々開いていたパネルは閉じられ ...
  • Description: クールなエフェクトのフライアウトメニューです。css3も併用しています。要jquery.easingです。 Sample: demo ...
  • Description: マウスオーバーで四方に画像が分かれ、別のコンテンツが表示される、というもの。マウスを離すと自動で戻りますが、その時のアニメーションエフェクトにも工夫 ...
  • Description: 美しいサイドアウトナビゲーションです。マウスを乗せる事でアイコンがスライドインします。また、メニュー全体をposition: fixed;で固定させ ...
  • Description: マウスオーバーで可愛いアイコンが降り、離すと裏から戻る、というアニメーションのグローバルメニューです。ユニークでインパクト有ります。 Sa ...
  • Description: エフェクトの豊富なスライドギャラリーです。昔のFlashライクなエフェクトでマークアップも簡単なので導入も手軽です。IE6での挙動はやや不安定です ...