189 8069 5689
本文实例讲述了jQuery实现两款有动画功能的导航菜单代码。分享给大家供大家参考。具体如下：
成都创新互联公司于2013年创立，先为平顶山等服务建站，平顶山等地企业，进行企业商务咨询服务。为平顶山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
这里介绍两个有动画功能的jQuery导航菜单，每个具备移动背景的效果，第二则是渐变背景效果，两个都不错，根据你的喜好选择了，菜单的风格和颜色自己修改一下就能用了。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
title两个有动画功能的导航菜单/title
script
src="jquery-1.6.2.min.js"
type="text/javascript"/script
script
type="text/javascript"
$(function()
{
$("#test1
a").mouseover(function()
{
var
index
=
$("#test1
a").index(this);
var
width
=
$("#test1
a").width();
$("#test1
.showhover").stop().animate({left:width*index},1000);
})
$("#test2
a").mouseover(function()
{
var
index
=
$("#test2
a").index(this);
var
width
=
$("#test2
a").width();
$("#test2
.showhover").stop().animate({left:width*index,opacity:'0.6'},1000).stop(false,true).animate({opacity:'1.0'},500);
})
})
/script
style
type="text/css"
.body
{margin:10px;}
img
{border:0;}
a
{text-decoration:none;}
ul{list-style:none;
margin:0;
padding:0;}
.menu
{background:#003399;
height:25px;
width:600px;
position:relative;
overflow:hidden;}
.menu
.showmenu,
.menu
.showhover{
position:absolute;}
.menu
.showmenu
a
{float:left;
display:block;}
.menu
.showmenu
a
{font:700
12px/25px
Microsoft
YaHei;
color:#fff;
width:100px;
height:25px;
text-align:center;}
.menu
.showhover
{background:#990033;
width:100px;
height:25px;}
/style
/head
body
div
class="menu"
id="test1"
div
class="showhover"/div
div
class="showmenu"
a
href="#"网站首页/a
a
href="#"关于我们/a
a
href="#"新闻中心/a
a
href="#"产品中心/a
a
href="#"解决方案/a
a
href="#"联系我们/a
/div
/div
div
style="clear:both;height:50px;"/div
div
class="menu"
id="test2"
div
class="showhover"/div
div
class="showmenu"
a
href="#"网站首页/a
a
href="#"关于我们/a
a
href="#"新闻中心/a
a
href="#"产品中心/a
a
href="#"解决方案/a
a
href="#"联系我们/a
/div
/div
/body
/html
希望本文所述对大家的jQuery程序设计有所帮助。
ul,ol,li{list-style:none;padding:0px;margin:0px;}
#menu *{line-height:30px;}
#menu a{
text-decoration:none;
display:block;
}
#menu ul{
text-align:left;
background:#333;
}
#menu .arrow{ /* 菜单项的右侧小箭头 */
float:right;
padding-right:5px;
}
#menuul{height:30px;} /* 即使没有菜单项也能保持顶级菜单栏的高度。 */
/* 一级菜单 */
#menuulli{
text-align:center;
display:inline-block;
width:80px;
}
#menuullia{color:#fff;}
#menuulli:hover{background:#666;}
/* 下拉的菜单栏 */
#menuulli ul{
display:none;
width:150px;
position:absolute;
background:#c1cd94;
box-shadow:2px 2px 2px #000;
-webkit-box-shadow:2px 2px 2px #000;
-moz-box-shadow:2px 2px 2px #123;
}
/* 下拉菜单的菜单项 */
#menuulliul li{padding-left:5px; position:relative;}
#menuulliul lia{color:#000;}
#menuulliul li:hover{background:#d3dbb3;}
/* 三级及以下的菜单项的定位 */
#menuulliulli ul{left:150px; top:0px;}
[html]
这是JS的控制代码：
[code]
$(document).ready(function()
{
/* 菜单初始化 */
$('#menuulliul').find('li:has(ul:not(:empty))a').append("span class='arrow'/span"); // 为有子菜单的菜单项添加''符号
$("#menuulli").bind('mouseover',function() // 顶级菜单项的鼠标移入操作
{
$(this).children('ul').slideDown('fast');
}).bind('mouseleave',function() // 顶级菜单项的鼠标移出操作
{
$(this).children('ul').slideUp('fast');
});
$('#menuulliul li').bind('mouseover',function() // 子菜单的鼠标移入操作
{
$(this).children('ul').slideDown('fast');
}).bind('mouseleave',function() // 子菜单的鼠标移出操作
{
$(this).children('ul').slideUp('fast');
});
});
本文实例讲述了jquery实现漂亮的二级下拉菜单代码。分享给大家供大家参考。具体如下：
这里介绍一款基于jquery实现的网站下拉菜单，黑色风格，很漂亮，本菜单需要点击主菜单后的小三角符号才下拉出二级菜单，并不是有些菜单，是鼠标移上主菜单的时候就滑过，至于哪一种，就看个人的喜好了
先来看看运行效果：
在线演示地址如下：
具体代码如下：
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312"
titlejQuery二级菜单/title
script
type="text/javascript"
src="jquery-1.6.2.min.js"/script
script
type="text/javascript"
$(document).ready(function(){
$("ul.subnav").parent().append("span/span");
$("ul.topnav
li
span").click(function()
{
$(this).parent().find("ul.subnav").slideDown('fast').show();
$(this).parent().hover(function()
{
},
function(){
$(this).parent().find("ul.subnav").slideUp('slow');
});
}).hover(function()
{
$(this).addClass("subhover");
},
function(){
$(this).removeClass("subhover");
});
});
/script
style
type="text/css"
body
{
margin:
0;
padding:
0;
font:
10px
normal
Arial,
Helvetica,
sans-serif;
background:
#ddd
url(images/body_bg.gif)
repeat-x;
}
.container
{
width:
960px;
margin:
auto;
position:
relative;
}
#header
{
padding-top:
120px;
}
#header
.disclaimer
{
color:
#999;
padding:
100px
7px
0;
text-align:
right;
display:
block;
position:
absolute;
top:
0;
right:
0;
}
#header
.disclaimer
a
{
color:
#ccc;}
ul.topnav
{
list-style:
none;
padding:
20px;
margin:
0;
float:
left;
width:
920px;
background:
#222;
font-size:
1.2em;
background:
url(images/topnav_bg.gif)
repeat-x;
}
ul.topnav
li
{
float:
left;
margin:
0;
padding:
15px
0;
position:
relative;
}
ul.topnav
li
a{
padding:
10px
5px;
color:
#fff;
display:
block;
text-decoration:
none;
float:
left;
}
ul.topnav
li
a:hover{
background:
url(images/topnav_hover.gif)
no-repeat
center
top;
}
ul.topnav
li
span
{
width:
17px;
height:
35px;
float:
left;
background:
url(images/subnav_btn.gif)
no-repeat
center
top;
}
ul.topnav
li
span.subhover
{background-position:
center
bottom;
cursor:
pointer;}
ul.topnav
li
ul.subnav
{
list-style:
none;
position:
absolute;
left:
0;
top:
35px;
background:
#333;
margin:
0;
padding:
0;
display:
none;
float:
left;
width:
170px;
-moz-border-radius-bottomleft:
5px;
-moz-border-radius-bottomright:
5px;
-webkit-border-bottom-left-radius:
5px;
-webkit-border-bottom-right-radius:
5px;
border:
1px
solid
#111;
}
ul.topnav
li
ul.subnav
li{
margin:
0;
padding:
0;
border-top:
1px
solid
#252525;
border-bottom:
1px
solid
#444;
clear:
both;
width:
170px;
}
html
ul.topnav
li
ul.subnav
li
a
{
float:
left;
width:
145px;
background:
#333
url(images/dropdown_linkbg.gif)
no-repeat
10px
center;
padding-left:
20px;
}
html
ul.topnav
li
ul.subnav
li
a:hover
{
background:
#222
url(images/dropdown_linkbg.gif)
no-repeat
10px
center;
}
#header
img
{
margin:
20px
10px;
}
/style
/head
body
div
class="container"
div
id="header"
ul
class="topnav"
lia
href="#"网站首页/a/li
li
a
href="#"网页菜单/a
ul
class="subnav"
lia
href="#"ASP导航/a/li
lia
href="#"JSP导航/a/li
lia
href="#"ASP.net导航/a/li
lia
href="#"PHP导航/a/li
/ul
/li
li
a
href="#"网页特效/a
ul
class="subnav"
lia
href="#"层和菜单/a/li
lia
href="#"鼠标特效/a/li
lia
href="#"表单特效/a/li
lia
href="#"表格特效/a/li
lia
href="#"CSS特效/a/li
lia
href="#"jQuery特效/a/li
/ul
/li
lia
href="#"搜索引擎/a/li
lia
href="#"博客营销/a/li
lia
href="#"联系我们/a/li
/ul
/div
/div
/body
/html
希望本文所述对大家的jquery程序设计有所帮助。