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 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 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代码
2012/06/08 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
layui的table中显示图片方法
2018/08/17 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
详解Python中DOM方法的动态性
2015/04/11 Python
Python base64编码解码实例
2015/06/21 Python
Django实现分页功能
2018/07/02 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
Java如何格式化日期
2012/08/07 面试题
EJB实例的生命周期
2016/10/28 面试题
小学社会实践活动总结
2014/07/03 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
认真学习保证书
2015/02/26 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
党员心得体会范文2016
2016/01/23 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技