QQ網(wǎng)站的選項卡、滑動門菜單

2024-09-05 12:19:23

字體：大中小

供稿：網(wǎng)友

來自騰訊QQ網(wǎng)站首頁的滑動門菜單，灰色風(fēng)格，簡潔清新，CSS+JS實現(xiàn)，可以一行兩列顯示，自動省略多出的內(nèi)容，整齊美觀，值得借鑒一下。

<!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=utf-8" /><title>滑動門、選項卡</title><script type="text/javascript"></script><style type="text/css">* { margin:0; padding:0; word-break:break-all; }body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }h1, h2, h3, h4, h5, h6 { font-size:1em; }a { color:#1F376D; text-decoration:none; }a:hover { color:#BD0A01; text-decoration:underline; }ul, li { list-style:none; }fieldset, img { border:none; }.board { width:409px; margin:50px; }.board_caption { height:27px; background:url(/jscss/demoimg/200903/tabsbg.gif) no-repeat 0 0; }.board_caption h3 { float:left; width:73px; height:22px; height:20px; padding:3px 0 4px; margin-right:1px; background:url(/jscss/demoimg/200903/tabsbg.gif) no-repeat; text-align:center; line-height:20px; font-weight:normal; cursor:pointer; }.board_caption h3 a { display:block; width:100%; }.board_caption .normal { background-position:-100px -50px; }.board_caption .current { background-position:0 -50px; font-weight:bold; }.board_content { padding:0 0 5px; border-right:1px solid #D4D4D4; border-bottom:1px solid #D4D4D4; border-left:1px solid #D4D4D4;}.board_content .normal { display:none; }.board_content .current { display:block; }.board_content ul { width:98%; overflow:hidden; padding:5px 0 0 5px; }.board_content ul li { display:inline; float:left; width:180px; height:24px; overflow:hidden; margin-left:6px; padding-left:8px; background:#FFF url(/jscss/demoimg/200903/tabsbg.gif) no-repeat 0 -88px; line-height:24px; }.board_content ul li a { font-size:14px; }</style><script type="text/javascript">function secBoard(elementID,listName,n) {var elem = document.getElementById(elementID);var elemlist = elem.getElementsByTagName("h3");for (var i=0; i<elemlist.length; i++) {elemlist[i].className = "normal";var m = i+1;document.getElementById(listName+"_"+m).className = "normal";}elemlist[n-1].className = "current";document.getElementById(listName+"_"+n).className = "current";}</script></head><body><div   id="iwvjtn8m0"   class="board"><div   id="iwvjtn8m0"   class="board_caption" id="hotinfo_caption"><h3 class="current">源碼</h3><h3 class="normal">科技</h3><h3 class="normal">軟件</h3></div><div   id="iwvjtn8m0"   class="board_content"><div   id="iwvjtn8m0"   class="current" id="infolist_1"><ul><li>VB遠程網(wǎng)絡(luò)監(jiān)視、文件傳輸、消息發(fā)送實例程序</li><li>一款超強的VB網(wǎng)絡(luò)工具箱源程序</li><li>開源指法練習(xí)打字軟件VB版</li><li>Magento開源網(wǎng)店 v1.2</li></ul></div><div   id="iwvjtn8m0"   class="normal" id="infolist_2"><ul><li>ASP FSO在線文件管理、上傳、編輯系統(tǒng)</li><li>VB托盤氣泡提示控件</li><li>一款Java網(wǎng)絡(luò)格斗游戲源碼</li><li>因特達Access數(shù)據(jù)庫在線管理工具 v9.0</li></ul></div><div   id="iwvjtn8m0"   class="normal" id="infolist_3"><ul><li>VB6寫的MSSQL數(shù)據(jù)庫管理工具</li><li>osFileManager PHP網(wǎng)站文件管理系統(tǒng) v2.2</li><li>56770 Eshop 樂彼網(wǎng)上開店系統(tǒng) v8.4</li><li>JAVA實現(xiàn)CLDC與MIDP底層編程的代碼</li></ul></div></div></div></body></html>

上一篇：簡約CSS滑動門 (Tabs)

下一篇：X-Menu 動感導(dǎo)航菜單