Fancy Apple-Style Icon


Description: マウスオーバーで可愛いアイコンが降り、離すと裏から戻る、というアニメーションのグローバルメニューです。ユニークでインパクト有ります。
Sample: demo
Tutorial: CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation
License: -

Note

 $(function() {
                var d=1000;
                $('#menu span').each(function(){
                    $(this).stop().animate({
                        'top':'-17px'
                    },d+=250);
                });

                $('#menu > li').hover(
                function () {
                    var $this = $(this);
                    $('a',$this).addClass('hover');
                    $('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
                },
                function () {
                    var $this = $(this);
                    $('a',$this).removeClass('hover');
                    $('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
                }
            );
            });

値は必要に応じて変更してください。

Related snippet :

  • Description: 美しいサイドアウトナビゲーションです。マウスを乗せる事でアイコンがスライドインします。また、メニュー全体をposition: fixed;で固定させ ...
  • Description: オンマウスでフェードエフェクトをかけながら画像を切り替えます。cssスプライト使用。シンプルなエフェクトですが、クロスブラウザにも対応しており、目を ...
  • Description: シンプルにアニメーションするメニュー。簡単なコードで実装することが出来ます。クロスブラウザにも対応しており、ちょっとしたインパクトも与えることができ ...
  • Description: Appleのスライドショーのようなギャラリーを構築するチュートリアルです。デモではcss3と、IE7のハックを用いているので汎用的とは言えませんが、 ...
  • Description: マウスを乗せるとアイコンが回転しながら開き、コンテンツを表示するメニューを実装します。IEでは回転はしませんが、開閉は可能です。 Samp ...
  • Description: マウスを乗せると縦スライドして色が切り替わるメニュー。テキストメニューをスタイリッシュに見せることができるのでSEOも考慮しているサイトにも使えそう ...
  • Description: 左のサムネイルにマウスオーバーするとアニメーションエフェクト付きで拡大、クリックすると右の大きな画像が切り替わる、というイメージギャラリーです。 ...