您的位置：首页 > Web前端 > JQuery

JQuery实现简单菜单

2009-11-26 21:53 274 查看

JQuery真是个好东西！

废话少说，直入正题。

1.menu.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="css.css" />
<script language="javascript" src="jquery.js" src="jquery.js"></script>
<script language="javascript">
$(document).ready(function(){
var arr = new Array("java","cplusplus","net","htm","php","flash");
for(var i=0;i<arr.length;i++){
$("#" + arr[i] + "").bind("mouseover",{k:i},function(event){
$("#menu" + event.data.k).css("left", $("#" + arr[event.data.k]).offset().left - 40);
$("#menu" + event.data.k).css("top" , $("#" + arr[event.data.k]).offset().top  + 20);
$("#"+ arr[event.data.k]).css("background-color","#999999");
$("#menu" + event.data.k).show();
}
);
$("#" + arr[i] + "").bind("mouseout",{k:i},function(event){
$("#" + arr[event.data.k] + "").css("background-color","#cccccc");
$("#menu" + event.data.k).hide();
}
);
}
});
</script>
<title>无标题文档</title>
</head>

<body>
<div>
<div class="nav1">HOME</div>
<div class="nav1" id="java">JAVA
<div class="menu" id="menu0">
<ul>
<li><a href="#" >JAVA1</a></li>
<li><a href="#" >JAVA2</a></li>
<li><a href="#" >JAVA3</a></li>
<li><a href="#" >JAVA4</a></li>
<li><a href="#" >JAVA5</a></li>
</ul>
</div>
</div>
<div class="nav1" id="cplusplus">C++
<div class="menu" id="menu1">
<ul>
<li><a href="#" mce_href="#">C++1</a></li>
<li><a href="#" mce_href="#">C++2</a></li>
<li><a href="#" mce_href="#">C++3</a></li>
<li><a href="#" mce_href="#">C++4</a></li>
<li><a href="#" mce_href="#">C++5</a></li>
</ul>
</div>
</div>
<div class="nav1" id="net">.NET
<div class="menu" id="menu2">
<ul>
<li><a href="#" >.NET1</a></li>
<li><a href="#" >.NET2</a></li>
<li><a href="#" >.NET3</a></li>
<li><a href="#" >.NET4</a></li>
<li><a href="#" >.NET5</a></li>
</ul>
</div>
</div>
<div class="nav1" id="htm">HTML
<div class="menu" id="menu3">
<ul>
<li><a href="#" >HTML1</a></li>
<li><a href="#" >HTML2</a></li>
<li><a href="#" >HTML3</a></li>
<li><a href="#" >HTML4</a></li>
<li><a href="#" >HTML5</a></li>
</ul>
</div>
</div>
<div class="nav1" id="php">PHP
<div class="menu" id="menu4">
<ul>
<li><a href="#" >PHP1</a></li>
<li><a href="#" >PHP2</a></li>
<li><a href="#" >PHP3</a></li>
<li><a href="#" >PHP4</a></li>
<li><a href="#" >PHP5</a></li>
</ul>
</div>
</div>
<div class="nav1" id="flash">FLASH
<div class="menu" id="menu5">
<ul>
<li><a href="#" >FLASH1</a></li>
<li><a href="#" >FLASH2</a></li>
<li><a href="#" >FLASH3</a></li>
<li><a href="#" >FLASH4</a></li>
<li><a href="#" >FLASH5</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

2.css.css

]body {
font-family: Arial, Helvetica, sans-serif;
}
a:link{
color:#ffffff;
text-decoration:none;
}
a:hover{
font-weight:bold;
color:#FF0000;
text-decoration:underline;
}
a:visited{
color:#ffffff;
}

li{
list-style:none;
background-color:#999999;
width:100px;
height:20px;
line-height:20px;
}
li:hover {
background-color:#666666;
}
.nav1{
width:100px;
height:20px;
line-height:20px;
list-style:none;
float:left;
text-align:center;
background-color:#CCCCCC;
}

.menu{
position:absolute;
display:none;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航