jquery实现导航nav
先规范JQuery代码结构组织如下
1，index.html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Try JQuery</title> <link rel="stylesheet" href="styles/main.css" type="text/css" /> </head> <body> <div id="main_container"> test </div> <script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="scripts/main.js" type="text/javascript"></script> </body></html>
2，styles/main.css
#main_container { background-color: gray; width: 960px; margin: 0 auto;}3，scripts/main.js
$(document).ready(function(){ alert("Hello");});$(function(){ alert("World");});实现一个简单的导航栏
1，index.html
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Try JQuery</title><link rel="stylesheet" href="styles/main.css" type="text/css" /></head><body><div id="main_container"><div id="navigation"><ul><li><a href="#">首页</a></li><li><a href="#">旅店</a><ul><li><a href="#">单人间</a></li><li><a href="#">双人间</a></li></ul></li><li><a href="#">联系我们</a></li></ul></div><div /><div>test</div></div><script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script><script src="scripts/main.js" type="text/javascript"></script></body></html>
2，styles/main.css
/* base css*/* {margin: 0;padding: 0;}ul, li {list-style: none outside none;}.clear {clear: both;}/* page css*/#main_container {background-color: #eeeeee;width: 960px;margin: 0 auto;}#navigation {width: 960px;}#navigation ul li {float: left;margin-right: 20px;z-index:100;position: relative;}#navigation ul li a {display: block;background: #eeeeee;font-weight: 700;}#navigation ul li a:hover {background: none;color: red;}#navigation ul li ul {display: none;overflow: hidden;position: absolute;background-color: #88C366;width: 80px;}#navigation ul li:hover ul {display: block;position: absolute;width: 100px;}#navigation ul li ul li{border-bottom: 1px solid #BBB;text-align: left;width: 100%;}3，scripts/main.js
//导航效果（兼容IE6）$(function(){$("#navigation ul li:has(ul)").hover(function(){$(this).children("ul").stop(true,true).slideDown(1000);},function(){$(this).children("ul").stop(true,true).slideUp("fast");});})?