Advertisement
Neolot

jQuery DropDown Menu

Feb 14th, 2012
133
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.     jQuery DropDown menu
  3. */
  4. var ddmenu={
  5.     buildmenu:function(menuid){
  6.         $(document).ready(function($){
  7.             var $mainmenu=$("#"+menuid+">ul");
  8.             $mainmenu.children('li:first').addClass('first');
  9.             $mainmenu.children('li:last').addClass('last');
  10.  
  11.             $("#"+menuid+">ul>li.parent").each(function(){
  12.                 var level2 = $(this).find('ul:eq(0)');
  13.                 if ( level2.width() < $(this).outerWidth(true) ) {
  14.                     level2.width($(this).outerWidth(true));
  15.                 }
  16.             });
  17.  
  18.             var $headers=$mainmenu.find("ul").parent();
  19.             $headers.each(function(i){
  20.                 var $subul=$(this).find('ul:eq(0)');
  21.                 this._dimensions={
  22.                     w:this.offsetWidth,
  23.                     h:this.offsetHeight,
  24.                     subulw:$subul.outerWidth(),
  25.                     subulh:$subul.outerHeight()
  26.                 }
  27.                 this.istopheader=$(this).parents("ul").length==1? true : false;
  28.                 $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0});
  29.  
  30.                 $(this).hover(
  31.                     function(e){
  32.                         $(this).addClass('ddhover').children("a").addClass('ddhover');
  33.                         var $targetul=$(this).children("ul:eq(0)");
  34.                         if ( $(this).data('direction') ) {
  35.                             this._offsets={
  36.                                 right:$(this).offset().right,
  37.                                 top:$(this).offset().top
  38.                             }
  39.                             var menuright=this.istopheader? 0 : this._dimensions.w;
  40.                             menuright=(this._offsets.right+menuright+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuright;
  41.                             $targetul.css({
  42.                                 right:menuright+"px",
  43.                                 width:this._dimensions.subulw+'px',
  44.                                 visibility: 'visible'
  45.                             });
  46.                         } else {
  47.                             this._offsets={
  48.                                 left:$(this).offset().left,
  49.                                 top:$(this).offset().top
  50.                             }
  51.                             var menuleft=this.istopheader? 0 : this._dimensions.w;
  52.                             menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft;
  53.                             $targetul.css({
  54.                                 left:menuleft+"px",
  55.                                 width:this._dimensions.subulw+'px',
  56.                                 visibility: 'visible'
  57.                             });
  58.                         }
  59.                     },
  60.                     function(e){
  61.                         $(this).children("ul:eq(0)").css('visibility', 'hidden');
  62.                         $(this).removeClass('ddhover').children("a:eq(0)").removeClass('ddhover');
  63.                     }
  64.                 ); //end hover
  65.                 $(this).click(function(){
  66.                     $(this).children("ul:eq(0)").hide()
  67.                 });
  68.             }); //end $headers.each()
  69.         });
  70.     }
  71. }
  72. ddmenu.buildmenu("menu");
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement