动画特效下拉导航菜单

PetitQ 导航菜单 2018-10-22 1.83K 0 0

这是一款仿 stripe.com 网站的带变形动画特效的下拉导航菜单特效。该导航菜单在菜单项之间切换时，下拉菜单会根据菜单内容的大小来动态变形，效果非常有趣。

HTML 结构:

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

也想出现在这里？联系我们吧

```
<header class="cd-morph-dropdown">
```

  <a href="#0" 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="#0">About</a>
```
```
      </li>
```
```
 
```

      <li class="has-dropdown links" data-content="pricing">

```
        <a href="#0">Pricing</a>
```
```
      </li>
```
```
 
```

      <li class="has-dropdown button" data-content="contact">

```
        <a href="#0">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> 
```

  </div> <!-- morph-dropdown-wrapper -->

```
</header>
```

初始化插件:

为了实现这个导航菜单，特效中创建了一个 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 + ')'

```
  });
```
```
};
```

动画特效下拉导航菜单

已有 456 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

导航菜单

动画特效下拉导航菜单

HTML 结构:

初始化插件:

动画特效下拉导航菜单

相关文章

适合移动设备使用CSS3分页导航条

创意设计CSS鼠标悬停发光动画菜单

移动优先多级导航菜单jQuery插件

发表回复取消回复

热销模板

导航菜单

HTML 结构:

初始化插件:

动画特效下拉导航菜单

相关文章

发表回复 取消回复

热销模板

发表回复取消回复