基于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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 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
文章推荐系统(三)
2006/10/09 PHP
PHP新手上路(四)
2006/10/09 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
Jquery常用技巧收集整理篇
2010/11/14 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
python读写LMDB文件的方法
2018/07/02 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
Python实现Restful API的例子
2019/08/31 Python
使用Python实现分别输出每个数组
2019/12/06 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
党员个人对照检查材料
2014/10/01 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
Golang获取List列表元素的四种方式
2022/04/20 Golang