提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

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

2023-02-19 12:18:03 时间

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

运行效果图：

点击：下载源码

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<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动感漂浮导航菜单代码，希望大家可以喜欢。

相关文章