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以对象为索引的关联数组
Jul 04 Javascript
jquery不常用方法汇总
Jul 26 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
JS实现拼图游戏
Jan 29 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
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基础教程
2015/08/26 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
生成二维码方法汇总
2014/12/26 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python time模块用法实例详解
2014/09/11 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
Python 移动光标位置的方法
2019/01/20 Python
Python同步遍历多个列表的示例
2019/02/19 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
大学毕业生通用求职信
2013/09/28 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
国际贸易实训报告
2014/11/05 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
心灵捕手观后感
2015/06/02 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android