基于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 相关文章推荐
jquery无缝向上滚动实现代码
Mar 29 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
简单理解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
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
浅析vue数据绑定
2017/01/17 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
Python 功能和特点(新手必学)
2015/12/30 Python
python实现批量注册网站用户的示例
2019/02/22 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
出纳工作岗位责任制
2014/02/02 职场文书
机动车登记业务委托书
2014/10/08 职场文书
个人委托书范文
2015/01/28 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP
python数字图像处理之图像的批量处理
2022/06/28 Python