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 相关文章推荐
javaScript 数值型和字符串型之间的转换
Jul 25 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
vue实力踩坑之push当前页无效
Apr 10 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 4.2书写安全的脚本
2006/10/09 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PDO::errorInfo讲解
2019/01/28 PHP
Jquery 常用方法经典总结
2010/01/28 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
python时间整形转标准格式的示例分享
2014/02/14 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
python实现三壶谜题的示例详解
2020/11/02 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
甜品店的创业计划书范文
2014/01/02 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
装配出错检讨书
2014/09/23 职场文书
党员评议个人总结
2014/10/20 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
社区党建工作总结2015
2015/05/13 职场文书
创业计划书之服装
2019/10/07 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
Python如何导出导入所有依赖包详解
2021/06/08 Python
详解JVM系列之内存模型
2021/06/10 Javascript
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android