Mega Drop Down Menus by Soh Tanaka


Description: マウスオーバーでフェードインアニメーションでドロップダウンするメガメニュー。3カラム、4カラムなども可能でクロスブラウザ対応です。
Sample: demo
Tutorial: Mega Drop Down Menus by Soh Tanaka
License: -

Note

//On Hover Over
function megaHoverOver(){
    $(this).find(".sub").stop().fadeTo('fast', 1).show(); //Find sub and fade it in
    (function($) {
        //Function to calculate total width of all ul's
        jQuery.fn.calcSubWidth = function() {
            rowWidth = 0;
            //Calculate row
            $(this).find("ul").each(function() { //for each ul...
                rowWidth += $(this).width(); //Add each ul's width together
            });
        };
    })(jQuery); 

    if ( $(this).find(".row").length > 0 ) { //If row exists...

        var biggestRow = 0;	

        $(this).find(".row").each(function() {	//for each row...
            $(this).calcSubWidth(); //Call function to calculate width of all ul's
            //Find biggest row
            if(rowWidth > biggestRow) {
                biggestRow = rowWidth;
            }
        });

        $(this).find(".sub").css({'width' :biggestRow}); //Set width
        $(this).find(".row:last").css({'margin':'0'});  //Kill last row's margin

    } else { //If row does not exist...

        $(this).calcSubWidth();  //Call function to calculate width of all ul's
        $(this).find(".sub").css({'width' : rowWidth}); //Set Width

    }
}
//On Hover Out
function megaHoverOut(){
  $(this).find(".sub").stop().fadeTo('fast', 0, function() { //Fade to 0 opactiy
      $(this).hide();  //after fading, hide it
  });
}

マウスオーバー時の処理。

Related snippet :

  • Description: クリックでドロップダウンするメニューコンテンツを実装します。スムーズにダウンし、戻りもスムーズです。IE6でもIE7でも全く同様の動きをしてくれます ...
  • Description: FacebookのフッターパネルをjQueryで実装したもの。クリックで隠されていたコンテンツが表示されたり、ツールチップなどもオマージュされていま ...
  • Description: バー全体が降りてくるタイプのドロップダウンメニューです。横並びに羅列されるので、下部コンテンツを邪魔することもありません。クロスブラウザで動作します ...
  • Description: 左のサムネイルにマウスオーバーするとアニメーションエフェクト付きで拡大、クリックすると右の大きな画像が切り替わる、というイメージギャラリーです。 ...
  • Description: 動的にタブを生成するプラグインです。タブはページ推移無しでコンテンツを切り替えることが可能です。クロスブラウザ対応ですが、IE6だけ多少cssハ ...
  • Description: シンプルなマルチレベルドロップダウンメニューです。クロスブラウザで動作します。アニメーションもなく、汎用的で最も使いやすいかもしれません。 ...
  • Description: シンプルなツールチップです。少しのコードで実装可能で、画像を含めることも出来ます。クロスブラウザにも対応。 Sample: demo ...