基于JS快速实现导航下拉菜单动画效果附源码下载


Posted in Javascript onOctober 27, 2016

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

快速的导航下拉菜单动画效果如下所示:

基于JS快速实现导航下拉菜单动画效果附源码下载

效果演示         源码下载

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> <!-- 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 + ')' 
}); 
};

以上所述是小编给大家介绍的基于JS快速实现导航下拉菜单动画效果附源码下载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
vue增删改查的简单操作
Jul 15 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
node.js实现上传文件功能
Jul 15 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
vuex的使用步骤
Jan 06 Vue.js
简单理解vue中el、template、replace元素
Oct 27 #Javascript
深入理解JavaScript定时机制
Oct 27 #Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 #Javascript
js实现加载更多功能实例
Oct 27 #Javascript
Vue.js一个文件对应一个组件实践
Oct 27 #Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 #Javascript
node.js文件上传处理示例
Oct 27 #Javascript
You might like
让PHP支持页面回退的两种方法[转]
2007/02/14 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
angularjs基础教程
2014/12/25 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
js实现购物车功能
2018/06/12 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
Python File readlines() 使用方法
2018/03/19 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
python实现黑客字幕雨效果
2018/06/21 Python
学生信息管理系统python版
2018/10/17 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
求职信的要素有哪些呢
2013/12/26 职场文书
小学科学教学反思
2014/01/26 职场文书
见习期自我鉴定
2014/01/31 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
MongoDB支持的索引类型
2022/04/11 MongoDB