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 原型模式实现OOP的再研究
Apr 09 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 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
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
PHP7新特性
2021/03/09 PHP
javascript 三种编解码方式
2010/02/01 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
Python 除法小技巧
2008/09/06 Python
python的正则表达式re模块的常用方法
2013/03/09 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
python实现SOM算法
2018/02/23 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
使用matplotlib画散点图的方法
2018/05/25 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
一份文言文检讨书
2014/09/13 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
消防演习通知
2015/04/25 职场文书
计划生育责任书
2015/05/09 职场文书
数据库连接池
2021/04/06 MySQL
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android
python对文档中元素删除,替换操作
2022/04/02 Python