支付宝赞助帐号:service@kuitao8.com 

下载地址

jquery下拉菜单超漂亮效果下载

Created2015-09-22   Views 1613    Author 懒人程序
jquery下拉菜单超漂亮效果下载
  1. jQuery(document).ready(function($){ 
  2.     //open/close mega-navigation 
  3.     $('.cd-dropdown-trigger').on('click'function(event){ 
  4.         event.preventDefault(); 
  5.         toggleNav(); 
  6.     }); 
  7.  
  8.     //close meganavigation 
  9.     $('.cd-dropdown .cd-close').on('click'function(event){ 
  10.         event.preventDefault(); 
  11.         toggleNav(); 
  12.     }); 
  13.  
  14.     //on mobile - open submenu 
  15.     $('.has-children').children('a').on('click'function(event){ 
  16.         //prevent default clicking on direct children of .has-children  
  17.         event.preventDefault(); 
  18.         var selected = $(this); 
  19.         selected.next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('move-out'); 
  20.     }); 
  21.  
  22.     //on desktop - differentiate between a user trying to hover over a dropdown item vs trying to navigate into a submenu's contents 
  23.     var submenuDirection = ( !$('.cd-dropdown-wrapper').hasClass('open-to-left') ) ? 'right' : 'left'
  24.     $('.cd-dropdown-content').menuAim({ 
  25.         activate: function(row) { 
  26.             $(row).children().addClass('is-active').removeClass('fade-out'); 
  27.             if( $('.cd-dropdown-content .fade-in').length == 0 ) $(row).children('ul').addClass('fade-in'); 
  28.         }, 
  29.         deactivate: function(row) { 
  30.             $(row).children().removeClass('is-active'); 
  31.             if( $('li.has-children:hover').length == 0 || $('li.has-children:hover').is($(row)) ) { 
  32.                 $('.cd-dropdown-content').find('.fade-in').removeClass('fade-in'); 
  33.                 $(row).children('ul').addClass('fade-out'
  34.             } 
  35.         }, 
  36.         exitMenu: function() { 
  37.             $('.cd-dropdown-content').find('.is-active').removeClass('is-active'); 
  38.             return true
  39.         }, 
  40.         submenuDirection: submenuDirection, 
  41.     }); 
  42.  
  43.     //submenu items - go back link 
  44.     $('.go-back').on('click'function(){ 
  45.         var selected = $(this), 
  46.             visibleNav = $(this).parent('ul').parent('.has-children').parent('ul'); 
  47.         selected.parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out'); 
  48.     });  
  49.  
  50.     function toggleNav(){ 
  51.         var navIsVisible = ( !$('.cd-dropdown').hasClass('dropdown-is-active') ) ? true : false
  52.         $('.cd-dropdown').toggleClass('dropdown-is-active', navIsVisible); 
  53.         $('.cd-dropdown-trigger').toggleClass('dropdown-is-active', navIsVisible); 
  54.         if( !navIsVisible ) { 
  55.             $('.cd-dropdown').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ 
  56.                 $('.has-children ul').addClass('is-hidden'); 
  57.                 $('.move-out').removeClass('move-out'); 
  58.                 $('.is-active').removeClass('is-active'); 
  59.             });  
  60.         } 
  61.     } 
  62.  
  63.     //IE9 placeholder fallback 
  64.     //credits http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html 
  65.     if(!Modernizr.input.placeholder){ 
  66.         $('[placeholder]').focus(function() { 
  67.             var input = $(this); 
  68.             if (input.val() == input.attr('placeholder')) { 
  69.                 input.val(''); 
  70.               } 
  71.         }).blur(function() { 
  72.            var input = $(this); 
  73.               if (input.val() == '' || input.val() == input.attr('placeholder')) { 
  74.                 input.val(input.attr('placeholder')); 
  75.               } 
  76.         }).blur(); 
  77.         $('[placeholder]').parents('form').submit(function() { 
  78.               $(this).find('[placeholder]').each(function() { 
  79.                 var input = $(this); 
  80.                 if (input.val() == input.attr('placeholder')) { 
  81.                    input.val(''); 
  82.                 } 
  83.               }) 
  84.         }); 
  85.     } 
  86. }); 

 

上一篇: 一个自适应的菜单访QQ菜单效果下载
下一篇: jquery手机全屏菜单效果下载
支持键盘 ← →

邮件订阅

订阅我们的精彩内容