快速的导航下拉菜单动画效果

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

查看演示 下载源码

HTML

该导航菜单的HTML结构如下：

<header class="cd-morph-dropdown">
  <a href="https://zhishitu.com" class="nav-trigger">Open Nav<span aria-hidden="true"></span></a>
   
  <nav class="main-nav">
    <ul>
      <li class="has-dropdown gallery" data-content="about">
        <a href="https://zhishitu.com">About</a>
      </li>
  
      <li class="has-dropdown links" data-content="pricing">
        <a href="https://zhishitu.com">Pricing</a>
      </li>
  
      <li class="has-dropdown button" data-content="contact">
        <a href="https://zhishitu.com">Contact</a>
      </li>
    </ul>
  </nav>
   
  <div class="morph-dropdown-wrapper">
    <div class="dropdown-list">
      <ul>
        <li id="about" class="dropdown gallery">
          <!-- dropdown content here -->
        </li>
  
        <li id="pricing" class="dropdown links">
          <!-- dropdown content here -->
        </li>
  
        <li id="contact" class="dropdown button">
          <!-- dropdown content here -->
        </li>
      </ul>
  
      <div class="bg-layer" aria-hidden="true"></div>
    </div> <!-- dropdown-list -->
  </div> <!-- morph-dropdown-wrapper -->
</header>

CSS样式请参照源码中的css/style.css文件。

Javascript

为了实现这个导航菜单，特效中创建了一个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));
   
  //add the .active class to the selected .dropdown and .is-dropdown-visible to the .cd-morph-dropdown 
  //...
};
  
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 + ')'
  });
};