1.   本网站所有源码包解压密码:www.youhutong.com
会员登录  帮助问答

JQuery实现网站导航下拉菜单动画效果

小川 前端
查看演示  

JQuery实现网站导航下拉菜单动画效果

11.jpg

        这是一个带变形动画特效的下拉导航菜单特效。该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒。

HTML代码:

<div class="cd-morph-dropdown">
  <div style="background:#000;"> 
   <nav class="main-nav">
     <ul>
        <li class="has-dropdown gallery" data-content="about">
         <a href="#0">关于我们</a>
        </li>

       <li class="has-dropdown links" data-content="pricing">
         <a href="#0">产品分类</a>
        </li>

       <li class="has-dropdown button" data-content="contact">
          <a href="#0">品牌故事</a>
        </li>
     </ul>
   </nav>
  </div>
  <div class="morph-dropdown-wrapper">
   <div class="dropdown-list">
      <ul>
        <li id="about" class="dropdown gallery">
         <!-- 关于我们弹出框HTML(详细代码请下载源码查看) -->
       </li>
       <li id="pricing" class="dropdown links">
         <!-- 产品分类弹出框HTML(详细代码请下载源码查看) -->
       </li>
       <li id="contact" class="dropdown button">
          <!-- 品牌故事弹出框HTML(详细代码请下载源码查看) -->
       </li>
     </ul>
   </div>
  </div>
</div>


JS代码:

为了实现这个导航菜单,特效中创建了一个morphDropdown对象。并使用bindEvents ()方法来处理元素的事件。

function morphDropdown( element ) { 
  this.element = element; 
  this.mainNavigation = this.element.find('.main-nav'); 
  this.mainNavigationItems = this.mainNavigation.find('.has-dropdown'); 
  this.dropdownList = this.element.find('.dropdown-list'); 
  //... 
  
  this.bindEvents(); 
}

bindEvents()方法用于在.has-dropdown和.dropdown元素上检测鼠标进入和鼠标离开事件。

morphDropdown.prototype.bindEvents = function() { 
  var self = this; 
    
  this.mainNavigationItems.mouseenter(function(event){ 
    //hover over one of the nav items -> show dropdown 
    self.showDropdown($(this)); 
  }).mouseleave(function(){ 
    //if not hovering over a nav item or a dropdown -> hide dropdown 
    if( self.mainNavigation.find('.has-dropdown:hover').length == 0 && 
    self.element.find('.dropdown-list:hover').length == 0 ) self.hideDropdown(); 
  }); 
    
  //... 
};

showDropdown方法用于处理宽度、高度和.dropdown-list元素的translateX值,以及放大和缩小.bg-layer元素。

morphDropdown.prototype.showDropdown = function(item) { 
  var selectedDropdown = this.dropdownList.find('#'+item.data('content')), 
    selectedDropdownHeight = selectedDropdown.innerHeight(), 
    selectedDropdownWidth = selectedDropdown.children('.content').innerWidth(), 
    selectedDropdownLeft = item.offset().left+item.innerWidth()/2-selectedDropdownWidth/2; 
   
  //update dropdown and dropdown background position and size 
  this.updateDropdown(selectedDropdown, parseInt(selectedDropdownHeight), 
  selectedDropdownWidth, parseInt(selectedDropdownLeft)); 
    
  //... 
}; 
   
morphDropdown.prototype.updateDropdown = function(dropdownItem, height, width, left) { 
  this.dropdownList.css({ 
      '-moz-transform': 'translateX(' + left + 'px)', 
      '-webkit-transform': 'translateX(' + left + 'px)', 
    '-ms-transform': 'translateX(' + left + 'px)', 
    '-o-transform': 'translateX(' + left + 'px)', 
    'transform': 'translateX(' + left + 'px)', 
    'width': width+'px', 
    'height': height+'px' 
  }); 
   
  this.dropdownBg.css({ 
    '-moz-transform': 'scaleX(' + width + ') scaleY(' + height + ')', 
      '-webkit-transform': 'scaleX(' + width + ') scaleY(' + height + ')', 
    '-ms-transform': 'scaleX(' + width + ') scaleY(' + height + ')', 
    '-o-transform': 'scaleX(' + width + ') scaleY(' + height + ')', 
    'transform': 'scaleX(' + width + ') scaleY(' + height + ')' 
  }); 
};


 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
立即下载源码  
【温馨提示】源码包解压密码:www.youhutong.com
如果你觉得这篇教程的内容对你有帮助、请支持本站谢谢!  点击进入捐赠通道

转载请注明来源地址:小川编程 » https://www.youhutong.com/index.php/article/index/114.html

( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情