|
|
导航效果预览图：
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>
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{ width: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; width:auto !important; width: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;} |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡