jquery动感漂浮导航菜单代码分享


Posted in Javascript onApril 15, 2020

这是一款基于jquery实现动感漂浮导航菜单的特效代码,菜单可以上下浮动,动感十足,为自己的网站增加了活力,是一款非常实用的导航菜单特效源码。

运行效果图:

jquery动感漂浮导航菜单代码分享

点击:下载源码

为大家分享的jquery动感漂浮导航菜单代码如下

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>jQuery Floating Menu</title>
 <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
 <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
 <script>
 
 $(document).ready(function () {

 //get the default top value
 var top_val = $('#menu li a').css('top');

 //animate the selected menu item
 $('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500}); 

 $('#menu li').hover(
 function () {
 
 //animate the menu item with 0 top value
 $(this).children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500}); 
 },
 function () {

 //set the position to default
 $(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500}); 

 //always keep the previously selected item in fixed position 
 $('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500}); 
 } 
 );
 
 });
 
 </script>
 
 <style>
 

 #menu {
 list-style:none; 
 padding:0;
 margin:0 auto;;
 height:70px;
 width:600px;
 }
 
 #menu li {
 float:left;
 width:109px;
 height:inherit;
 position:relative;
 overflow:hidden;
 }

 #menu li a {
 position:absolute;
 top:20px;
 text-indent:-999em;
 background:url(menu.png) no-repeat 0 0;
 display:block; 
 width:109px; 
 height:inherit;

 /* fast png fix for ie6 */
 position:relative;
 behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
 }
 
 </style>
 
</head>
<body>
<br/><br/><br/>

<ul id="menu">
 <li><a href="#">Item 1</a></li>
 <li><a href="#">Item 2</a></li>
 <li><a href="#">Item 3</a></li>
 <li><a href="#">Item 4</a></li>
 <li><a href="#">Item 5</a></li>
</ul>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>jQuery Floating Menu</title>
 <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
 <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
 <script>
 
 $(document).ready(function () {

 //get the default top value
 var top_val = $('#menu li a').css('top');

 //animate the selected menu item
 $('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500}); 

 $('#menu li').hover(
 function () {
 
 //animate the menu item with 0 top value
 $(this).children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500}); 
 },
 function () {

 //set the position to default
 $(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500}); 

 //always keep the previously selected item in fixed position 
 $('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500}); 
 } 
 );
 
 });
 
 </script>
 
 <style>
 

 #menu {
 list-style:none; 
 padding:0;
 margin:0 auto;;
 height:70px;
 width:600px;
 }
 
 #menu li {
 float:left;
 width:109px;
 height:inherit;
 position:relative;
 overflow:hidden;
 }

 #menu li a {
 position:absolute;
 top:20px;
 text-indent:-999em;
 background:url(menu.png) no-repeat 0 0;
 display:block; 
 width:109px; 
 height:inherit;

 /* fast png fix for ie6 */
 position:relative;
 behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
 }
 
 </style>
 
</head>
<body>
<br/><br/><br/>

<ul id="menu">
 <li><a href="#">Item 1</a></li>
 <li><a href="#">Item 2</a></li>
 <li><a href="#">Item 3</a></li>
 <li><a href="#">Item 4</a></li>
 <li><a href="#">Item 5</a></li>
</ul>

如果大家还想深入学习,可以点击jQuery级联菜单特效汇总、Javascript级联菜单特效汇总进行学习。

以上就是为大家分享的jquery动感漂浮导航菜单代码,希望大家可以喜欢。

Javascript 相关文章推荐
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
js中生成map对象的方法
Jan 09 Javascript
angularJS 中input示例分享
Feb 09 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
Vue中的验证登录状态的实现方法
Mar 09 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 #Javascript
jquery实现动静态条形统计图
Aug 17 #Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 #Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 #Javascript
js简单实现Select互换数据的方法
Aug 17 #Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 #Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 #Javascript
You might like
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
Destoon实现多表查询示例
2014/08/21 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
python实现取余操作的简单实例
2020/08/16 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
小学生十佳少年事迹材料
2014/08/20 职场文书