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 jQuery $.post $.ajax用法
Jul 09 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
vue设置默认首页的操作
Aug 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
火车头采集器3.0采集图文教程
2007/03/17 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
浅谈Redux中间件的实践
2018/07/27 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
基层干部十八大感言
2014/01/19 职场文书
教师节促销活动方案
2014/02/14 职场文书
销售队伍口号
2014/06/11 职场文书
伦敦奥运会口号
2014/06/13 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
解决xampp安装后Apache无法启动
2022/03/21 Servers