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


Posted in Javascript onNovember 01, 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方法调用括号的问题探讨
Jan 24 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
JS实现可控制的进度条
Mar 25 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
AngularJS入门教程之数据绑定用法示例
Nov 01 #Javascript
jQuery动态生成Bootstrap表格
Nov 01 #Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 #Javascript
jQuery双向列表选择器select版
Nov 01 #Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 #Javascript
JS button按钮实现submit按钮提交效果
Nov 01 #Javascript
Javascript 动态改变imput type属性
Nov 01 #Javascript
You might like
用PHP创建PDF中文文档
2006/10/09 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
javascript 闭包详解
2015/02/15 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
python动态性强类型用法实例
2015/05/09 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
python爬取youtube视频的示例代码
2021/03/03 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
优秀员工自荐书
2013/12/19 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
高校教师自荐信范文
2014/03/13 职场文书
委托书范本
2014/09/13 职场文书
个人收入证明模板
2014/09/18 职场文书
本溪水洞导游词
2015/02/11 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书