DIV+CSS仿騰訊拍拍網導航菜單_菜單導航特效

DIV+CSS仿騰訊拍拍網的導航菜單，現在不少的網站都有類似的效果，尤其是菜單左上方的一個“新”字，是菜單的點晴之筆，考驗CSS布局者的綜合掌控能力，另外一點值得說的是本菜單對背景的控制能力，別看鼠標放上后菜單換了圖片，實際上它只用了一張背景圖片哦。

<!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" mrc="text/html; charset=gb2312" />
<title>DIV+CSS仿騰訊拍拍網導航菜單</title>
<style>
html,body,div,a,sup,li,ul{margin:0;padding:0;}
body{font:12px Tahoma, Verdana;text-align:center;background-color:#fff;}
ul{list-style-type:none;}
a:link,a:visited{color:#333;text-decoration:none;}
a:hover,a:active{color:#ff4e00;text-decoration:underline;}
#navColumn li,#navColumn a:hover,#navColumn a:active,.navAdditional,.navAdditional div{background:url(http://p1.mb5u.com/texiao/1/heads.png) no-repeat;}
.navAdditional div{background-position:left -212px;padding-left:4px;}
.navAdditional{background-position:right -212px;margin-left:8px;float:right;width:250px;padding-right:4px;}
#navColumn{width:auto;padding:0 5px 0 6px;margin-top:12px}
#navColumn ul{background:url(http://p1.mb5u.com/texiao/1/heads.png) left -245px repeat-x;padding-left:2px;height:32px;}
#navColumn li{float:left;line-height:32px;text-align:center;width:60px;background-position:-149px -287px;}
#navColumn li.last{background:none;}
#navColumn li.now a:link,#navColumn li.now a:visited{background-position:left -336px;color:#fff;font-size:14px;font-weight:700;}
#navColumn a{position:relative;}
#navColumn sup{position:absolute;background:url(http://p1.mb5u.com/texiao/1/heads.png) -120px -445px repeat-x;text-indent:-199em;width:16px;height:19px;top:-6px;overflow:hidden;right:10px;}
#navColumn a:link,#navColumn a:visited{width:60px;display:block;}
#navColumn a:hover,#navColumn a:active{background-position:left -336px;width:60px;height:32px;display:block;text-decoration:none;color:#fff;font-weight:700;}
</style>
</head>
<body>
<div id="navColumn">
  <div class="navAdditional">
    <div>
      <ul>
        <li><a href="#">充值<sup>新</sup></a></li>
        <li><a href="/jscss/">特惠</a></li>
        <li><a href="/">優品</a></li>
        <li class="last"><a href="/">酒店</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

所屬頻道：菜單導航特效/更新時間：2011-02-24

[收藏][報錯][返回列表]

相關菜單導航特效：

DIV+CSS仿騰訊拍拍網導航菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些