基于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构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
JavaScript数据类型详解
Apr 01 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
微信小程序:数据存储、传值、取值详解
May 07 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
PHP+APACHE实现用户论证的方法
2006/10/09 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
用javascript实现页面打印的三种方法
2007/03/05 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
swiper4实现移动端导航切换
2020/10/16 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
python递归全排列实现方法
2018/08/18 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
基于python调用psutil模块过程解析
2019/12/20 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
社会实践活动总结报告
2014/04/29 职场文书
求职信格式要求
2014/05/23 职场文书
承诺保证书格式
2015/02/28 职场文书
辩论会主持词
2015/07/03 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
初中政治教学反思
2016/02/23 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers