Advertisement
Neolot

jQuery DropDown menu with inner columns support

Mar 20th, 2012
81
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*!
  2.  * jQuery Dropdown Menu Plugin
  3.  * Post URL
  4.  * Copyright (c) 2012 Yury Pokhylko aka Neolot
  5.  * Version: 1.0 (date)
  6.  * Dual licensed under the MIT and GPL licenses:
  7.  * http://www.opensource.org/licenses/mit-license.php
  8.  * http://www.gnu.org/licenses/gpl.html
  9.  * Requires: jQuery v1.3.2 or later
  10.  */
  11.  
  12. (function($) {
  13.     var defaults = {};
  14.  
  15.     $.fn.ddmenu = function(params){
  16.  
  17.         var options = $.extend({}, defaults, params);
  18.  
  19.         return this.each(function() {
  20.             var menuid = $(this).attr('id');
  21.             var $mainmenu=$("#"+menuid+">ul");
  22.             $mainmenu.children('li:first').addClass('first'); // Добавляем классы для первого...
  23.             $mainmenu.children('li:last').addClass('last'); //  и последнего пункта корневого меню
  24.  
  25.             // Если ширина выпад. списка меньше ширины родителя, то выравниваем выпад. список по родителю
  26.             $("#"+menuid+">ul>li").each(function(){
  27.                 var level2 = $(this).find('ul:eq(0)');
  28.                 if ( level2 && ( level2.width() < $(this).outerWidth(true) ) ) {
  29.                     level2.width($(this).outerWidth(true));
  30.                 }
  31.             });
  32.  
  33.             var $headers=$mainmenu.find("ul").parent();
  34.             $headers.each(function(i){
  35.                 var $subul=$(this).find('ul:eq(0)');
  36.                 this._dimensions={ // Высчитываем размеры выпад. списка и родителя
  37.                     w:this.offsetWidth,
  38.                     h:this.offsetHeight,
  39.                     subulh: $subul.outerHeight(true)
  40.                 }
  41.                 var cols = $subul.find('.column'); // Проверяем, есть ли колонки
  42.                 if ( cols && ( cols.size() > 1 ) ) { // Если их больше 1, то рассчитываем ширину ul
  43.                     this._dimensions={
  44.                         subulw: cols.size() * cols.outerWidth(true)
  45.                     }
  46.                 } else {
  47.                     this._dimensions={ // Если нет - считаем как обычно
  48.                         subulw:$subul.outerWidth(true)
  49.                     }
  50.                 }
  51.                 this.istopheader=$(this).parents("ul").length==1? true : false;
  52.                 $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0});
  53.  
  54.                 $(this).hover(
  55.                     function(e){
  56.                         $(this).addClass('ddhover').children("a").addClass('ddhover');
  57.                         var $targetul=$(this).children("ul:eq(0)");
  58.                         if ( $(this).hasClass('rtl') || ( $(this).parents('.rtl').size() > 0 ) ) {
  59.                             this._offsets={
  60.                                 right:$(this).offset().right
  61.                             }
  62.                             var menuright=this.istopheader? 0 : this._dimensions.subulw;
  63.                             menuright=(this._offsets.right+menuright+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuright;
  64.                             $targetul.css({
  65.                                 right:menuright+"px"
  66.                             });
  67.                         } else {
  68.                             this._offsets={
  69.                                 left:$(this).offset().left
  70.                             }
  71.                             var menuleft=this.istopheader? 0 : this._dimensions.subulw;
  72.                             menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft;
  73.                             $targetul.css({
  74.                                 left:menuleft+"px"
  75.                             });
  76.                         }
  77.                         this._offsets={
  78.                             top:$(this).offset().top
  79.                         }
  80.                         $targetul.css({
  81.                             width:this._dimensions.subulw+'px',
  82.                             visibility: 'visible'
  83.                         });
  84.                     },
  85.                     function(e){
  86.                         $(this).children("ul:eq(0)").css('visibility', 'hidden');
  87.                         $(this).removeClass('ddhover').children("a:eq(0)").removeClass('ddhover');
  88.                     }
  89.                 ); //end hover
  90.                 $(this).click(function(){
  91.                     $(this).children("ul:eq(0)").hide()
  92.                 });
  93.             }); //end $headers.each()
  94.         });
  95.     };
  96. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement