jquery语言下拉菜单--（解决滑动菜单晃动问题）

kathy3bg 2011-11-09 03:20:47

今天教大家用jquery语言制作下拉菜单--本教程已解决了jquery的 hover 滑动菜单晃动问题，大家可以参照本例源码制作。（转帖请注明：来自中山大学数计学院网页设计培训中心。）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery语言下拉菜单--（解决滑动菜单晃动问题）</title>
<style type="text/css">
body {
font-size: 12px;
margin:0px;
padding:0px;

}
ul,li{
padding:0px;
margin:0px;
list-style:none;
}
a:link{
text-decoration:none;
color:#000;
}
a:visited{
text-decoration:none;
color:#000;
}
a:hover{
text-decoration: underline;
color: #0033CC;
}
#nav{
width:810px;
height:28px;
}
#nav ul li{
float:left;
width:198px;
height:23px;
position:relative;
padding:7px 0px 0px 0px;
background-color:#336699;
color:#FFFFFF;

}
#nav ul li ul{
text-align:center;

position:absolute;
width:198px;
top: 30px;
right:0px;
z-index:99px;
display:none;
}
#nav ul li ul li{
background: #666;
}

</style>
<script language="javascript" src="wendang/jquery.min.js"></script>
<script language="javascript">

$(document).ready(function(){
$('#nav ul li').hover(function()
{
$(this).children('ul').stop(true,true).slideDown('fast');
},
function()
{
$(this).children('ul').stop(true,true).slideUp('fast');

}
);

$("#nav ul li ul li").hover(function(){
$(this).css("background","#99CCCC");
},function(){
$(this).css("background","#666");
});

});

function wx()
{
alert("欢迎观看本教程，更多请查阅www.s6k8.com");

window.open('http://www.s6k8.com', 'newwindow', 'height=1000, width=1000, top=0, left=0, toolbar=yes,menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes')
}

</script>

</head>

<body onload="wx()">
<div id="nav">
<ul>
<li>
广州中山大学

<ul>
<li>
<a href="http://www.s6k8.com" target="_blank">广州中山大学</a>
</li>
<li>
<a href="http://www.s6k8.com" target="_blank">数学与计算机学院</a>
</li>
<li>
<a href="http://www.s6k8.com" target="_blank">网页设计培训中心</a>
</li>
<li>
<a href="http://www.s6k8.com" target="_blank">www.s6k8.com</a>
</li>
</ul>

</li>
<li>
数学与计算机学院

<ul>
<li>
<a href="http://www.s6k8.com" target="_blank">广州中山大学</a>
</li>
<li>
<a href="http://www.s6k8.com" target="_blank">数学与计算机学院</a>
</li>
<li>
<a href="http://www.s6k8.com" target="_blank">网页设计培训中心</a>
</li>
<li>
<a href="http://www.s6k8.com" target="_blank">www.s6k8.com</a>
</li>
</ul>

</li>
<li>

网页设计培训

<ul>
<li>
<a href="http://www.s6k8.com" target="_blank">广州中山大学</a>
</li>
<li>
<a href="http://www.s6k8.com" target="_blank">数学与计算机学院</a>
</li>
<li>
<a href="http://www.s6k8.com" target="_blank">网页设计培训中心</a>
</li>
<li>
<a href="http://www.s6k8.com" target="_blank">www.s6k8.com</a>
</li>
</ul>

</li>
<li>

www.s6k8.com

<ul>
<li>
<a href="http://www.s6k8.com" target="_blank">广州中山大学</a>
</li>
<li>
<a href="http://www.s6k8.com" target="_blank">数学与计算机学院</a>
</li>
<li>
<a href="http://www.s6k8.com" target="_blank">网页设计培训中心</a>
</li>
<li>
<a href="http://www.s6k8.com" target="_blank">www.s6k8.com</a>
</li>
</ul>

</li>
</ul>
</div>
</body>
</html>

...全文

189 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

kathy3bg 2011-11-11

打赏
举报

楼上的朋友们，我也是帮助有需要的同学学习知识，互助，各位大侠不要抛砖！

p2227 2011-11-09

打赏
举报

[Quote=引用 10 楼 ci1699 的回复:]

楼主这个就是以中大的名义开的培训而已拉。

引用 8 楼 p2227 的回复:

引用 5 楼 kathy3bg 的回复:

引用 3 楼 p2227 的回复:
中山大学数计学院网页设计培训中心都把中山大学称作为广州中山大学了

因为有些人还真的以为是中山大学在中山！故注明》
这样注明反而会让人认为中大是广州下面的一个技校呢
[/Quote]难怪难怪

ci1699 2011-11-09

打赏
举报

楼主这个就是以中大的名义开的培训而已拉。

[Quote=引用 8 楼 p2227 的回复:]

引用 5 楼 kathy3bg 的回复:

引用 3 楼 p2227 的回复:
中山大学数计学院网页设计培训中心都把中山大学称作为广州中山大学了

因为有些人还真的以为是中山大学在中山！故注明》
这样注明反而会让人认为中大是广州下面的一个技校呢
[/Quote]

光曰不日 2011-11-09

打赏
举报

可以再简单一点：
$('#nav ul li').hover(function(){
$(this).children('ul').stop(true,true).slideToggle()
});

$("#nav ul li ul li").hover(function(){
$(this).toggleClass('m_over')
});

.m_over{
background-color:#99CCCC !important;
}

p2227 2011-11-09

打赏
举报

[Quote=引用 5 楼 kathy3bg 的回复:]

引用 3 楼 p2227 的回复:
中山大学数计学院网页设计培训中心都把中山大学称作为广州中山大学了

因为有些人还真的以为是中山大学在中山！故注明》
[/Quote]这样注明反而会让人认为中大是广州下面的一个技校呢

ci1699 2011-11-09

打赏
举报

人品啊。人品。

function wx()
{
alert("欢迎观看本教程，更多请查阅www.s6k8.com");

window.open('http://www.s6k8.com', 'newwindow', 'height=1000, width=1000, top=0, left=0, toolbar=yes,menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes')
}

</script>

</head>

<body onload="wx()">

kathy3bg 2011-11-09