![点击查看原始大小图片](http://dl.javaeye.com/upload/attachment/165436/b18e9359-90b0-3f49-9752-c0f8b4ba25fe.jpg)
- 1.menu.html
-
- <!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=gb2312" />
- <title>CSS-JQuery Menu01</title>
- <link rel="stylesheet" type="text/css" href="css/menu.css"/>
- <script type="text/javascript" src="JQuery/jquery-1.3.2.min.js"></script>
- <script type="text/javascript" src="JQuery/menu.js"></script>
- </head>
-
- <body>
- <div class="menu outer">
- <div class="inner">
- <ul>
- <li class="selected" style="background:none;"><a href="#">首页</a></li>
- <li><a href="#">新闻</a></li>
- <li><a href="#">体育</a></li>
- <li><a href="#">财经</a></li>
- <li><a href="#">汽车</a></li>
- <li><a href="#">房产</a></li>
- <li><a href="#">股市</a></li>
- <li><a href="#">旅游</a></li>
- <li><a href="#">美食</a></li>
- <li><a href="#">女性</a></li>
- <li><a href="#">播客</a></li>
- <li><a href="#">拼客</a></li>
- <li><a href="#">交友</a></li>
- <li><a href="#">大杂烩</a></li>
- </ul>
- </div>
- </div>
- </body>
- </html>
1.menu.html<!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=gb2312" /><title>CSS-JQuery Menu01</title><link rel="stylesheet" type="text/css" href="css/menu.css"/><script type="text/javascript" src="JQuery/jquery-1.3.2.min.js"></script><script type="text/javascript" src="JQuery/menu.js"></script></head><body><div class="outer menu"> <div class="inner"> <ul> <li class="selected" style="background:none;"><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">体育</a></li> <li><a href="#">财经</a></li> <li><a href="#">汽车</a></li> <li><a href="#">房产</a></li> <li><a href="#">股市</a></li> <li><a href="#">旅游</a></li> <li><a href="#">美食</a></li> <li><a href="#">女性</a></li> <li><a href="#">播客</a></li> <li><a href="#">拼客</a></li> <li><a href="#">交友</a></li> <li><a href="#">大杂烩</a></li> </ul> </div></div></body></html>
- 2.JQuery/menu.js
-
- $(function(){
- var span = '<span></span>';
- $('.menu li a').wrapInner(span);
-
- $('.menu li').click(function(){
- $(this).addClass('selected')
- .siblings().removeClass('selected');
- });
- });
2.JQuery/menu.js$(function(){ var span = '<span></span>'; $('.menu li a').wrapInner(span); $('.menu li').click(function(){ $(this).addClass('selected') .siblings().removeClass('selected'); });});
- 3.css/menu.css
-
- *{ margin:0; padding:0;}
- body{ font:12px Verdana, Arial, Helvetica, sans-serif;}
- ul{ list-style:none;}
-
- .menu{ 949px; margin:0 auto; overflow:hidden;}
- .outer{ background:url("../images/menu_sprites.png") no-repeat top left; margin-top:10px; padding-left:15px;}
- .inner{ background:url("../images/menu_sprites.png") no-repeat top right; padding-right:5px;}
- .menu ul{ background:url("../images/menu_sprites.png") repeat-x 0 -102px; height:34px; }
- .menu li{ float:left; auto !important; 1%; white-space:nowrap; padding:0 5px; background:url("../images/menu_sprites.png") no-repeat bottom left;}
- .menu li a{ display:block; text-decoration:none; padding-left:15px; cursor:pointer;}
- .menu li a span { display:block;height:34px; line-height:34px; color:white; padding-right:15px;}
-
- .menu li a:hover { background:url("../images/menu_sprites.png") no-repeat left -68px;}
- .menu li a:hover span { background:url("../images/menu_sprites.png") no-repeat right -68px;}
-
- .menu li.selected a { background:url("../images/menu_sprites.png") no-repeat left -34px;}
- .menu li.selected a span { background:url("../images/menu_sprites.png") no-repeat right -34px; color:red;}
3.css/menu.css*{ margin:0; padding:0;}body{ font:12px Verdana, Arial, Helvetica, sans-serif;}ul{ list-style:none;}.menu{ 949px; margin:0 auto; overflow:hidden;}.outer{ background:url("../images/menu_sprites.png") no-repeat top left; margin-top:10px; padding-left:15px;}.inner{ background:url("../images/menu_sprites.png") no-repeat top right; padding-right:5px;}.menu ul{ background:url("../images/menu_sprites.png") repeat-x 0 -102px; height:34px; }.menu li{ float:left; auto !important; 1%; white-space:nowrap; padding:0 5px; background:url("../images/menu_sprites.png") no-repeat bottom left;}.menu li a{ display:block; text-decoration:none; padding-left:15px; cursor:pointer;}.menu li a span { display:block;height:34px; line-height:34px; color:white; padding-right:15px;}.menu li a:hover { background:url("../images/menu_sprites.png") no-repeat left -68px;}.menu li a:hover span { background:url("../images/menu_sprites.png") no-repeat right -68px;}.menu li.selected a { background:url("../images/menu_sprites.png") no-repeat left -34px;}.menu li.selected a span { background:url("../images/menu_sprites.png") no-repeat right -34px; color:red;}