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 new fun的执行过程
Aug 05 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
简单实现js上传文件功能
Aug 21 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
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 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
PHP 图片处理
2020/09/16 PHP
判断window.onload是否多次使用的方法
2014/09/21 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
js实现二级导航功能
2017/03/03 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
超简单的Python HTTP服务
2019/07/22 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
Python实现自动签到脚本功能
2020/08/20 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
企业治理工作自我评价
2013/09/26 职场文书
通信研究生自荐信
2014/02/01 职场文书
《将心比心》教学反思
2014/04/08 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
信访工作经验交流材料
2014/05/23 职场文书
2015年护士节慰问信
2015/03/23 职场文书
工作态度不好检讨书
2015/05/06 职场文书
丧事答谢词大全
2015/09/30 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书