仿站長網JS+CSS首頁導航菜單

2024-09-05 12:19:22

字體：大中小

來源：轉載

供稿：網友

很好看的一款網站首頁導航條，仿Admin5站長網的導航菜單風格，清新藍色，結構清淅，基于CSS和JavaScript，修改及使用方便，美觀大方。菜單條要用到5個GIF圖片，點擊運行后可自行保存一下。

<!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>仿站長網JS+CSS首頁導航菜單</title><style type="text/css">h4,div,ul,li,span{ padding:0px; margin:0px}/* 最外面DIV的樣式 */#slidingBlock {width:980px;over-flow:hidden;margin:auto;height:60px;border:#ccc solid 1px;background-image: url(/jscss/demoimg/200903/nav1.jpg);background-repeat: repeat-x;background-position: top;}#nav_box{height:33px;width:958px;text-align:center;margin-left: 11px;}#slidingBlock a{ color:#000;}#slidingBlock h4 {float:left;width:78px;height:33px;line-height:33px;text-align:center;font-size:12px;over-flow:hidden;float:left;background-image: url(/jscss/demoimg/200903/nav1.jpg);background-repeat: repeat-x;}#slidingBlock h4.menuNo {font-weight:normal;color: #fff;}#slidingBlock h4.menuOn {background-image: url(/jscss/demoimg/200903/nav2.jpg);background-repeat: no-repeat;background-position: 6px bottom;color:#1368c2}#line{ width:2px; height:33px;background-image: url(/jscss/demoimg/200903/nav5.jpg);background-repeat: no-repeat; float:left}#slidingBlock DIV.slidingList_none {    display:none}#slidingBlock DIV.slidingList {width:auto;margin:0px;padding:0px;height:27px;clear:both;background-image: url(/jscss/demoimg/200903/nav4.jpg);background-repeat: repeat-x;line-height:27px}#slidingBlock DIV.slidingList ul {    margin:0px;padding:0px; list-style:none;}#slidingBlock DIV.slidingList li {float:left;height:20px;line-height:20px;font-size:12px;text-indent:20px;}</style></head><body><div   class="iwvjtn8m0"   id="slidingBlock"><script language="javascript">  function switchmodTag(modtag,modcontent,modk) {    for(i=1; i <13; i++) {      if (i==modk) {        document.getElementById(modtag+i).className="menuOn";document.getElementById(modcontent+i).className="slidingList";}      else {        document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+i).className="slidingList_none";}    }  }</script><div   class="iwvjtn8m0"   id="nav_box"><h4 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','slidingList','1');this.blur();">網站首頁</h4><div   class="iwvjtn8m0"   id="line"></div><h4 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','slidingList','2');this.blur();">網頁特效</h4><div   class="iwvjtn8m0"   id="line"></div><h4 class="menuNo" id="mod3" onmouseover="switchmodTag('mod','slidingList','3');this.blur();">最新更新</h4><div   class="iwvjtn8m0"   id="line"></div><h4 class="menuNo" id="mod4" onmouseover="switchmodTag('mod','slidingList','4');this.blur();">下載排行</h4><div   class="iwvjtn8m0"   id="line"></div><h4 class="menuNo" id="mod5" onmouseover="switchmodTag('mod','slidingList','5');this.blur();">源碼分類</h4><div   class="iwvjtn8m0"   id="line"></div><h4 class="menuNo" id="mod6" onmouseover="switchmodTag('mod','slidingList','6');this.blur();">ASP源碼</h4><div   class="iwvjtn8m0"   id="line"></div><h4 class="menuNo" id="mod7" onmouseover="switchmodTag('mod','slidingList','7');this.blur();">PHP源碼</h4><div   class="iwvjtn8m0"   id="line"></div><h4 class="menuNo" id="mod8" onmouseover="switchmodTag('mod','slidingList','8');this.blur();">.NET源碼</h4><div   class="iwvjtn8m0"   id="line"></div><h4 class="menuNo" id="mod9" onmouseover="switchmodTag('mod','slidingList','9');this.blur();">JAVA源碼</h4><div   class="iwvjtn8m0"   id="line"></div><h4 class="menuNo" id="mod10" onmouseover="switchmodTag('mod','slidingList','10');this.blur();">DELPHI源碼</h4><div   class="iwvjtn8m0"   id="line"></div><h4 class="menuNo" id="mod11" onmouseover="switchmodTag('mod','slidingList','11');this.blur();">VC++源碼</h4><div   class="iwvjtn8m0"   id="line"></div><h4 class="menuNo" id="mod12" onmouseover="switchmodTag('mod','slidingList','12');this.blur();">VB源碼</h4></div><div   id="iwvjtn8m0"   class="slidingList" id="slidingList1"><ul><li >首頁</li><li >分類導航</li><li >最新更新</li><li >下載排行</li></ul></div><div   id="iwvjtn8m0"   class="slidingList_none" id="slidingList2"><ul><li  > 層和布局</li><li  > 菜單導航</li><li  > 表單及按鈕</li></ul></div><div   id="iwvjtn8m0"   class="slidingList_none" id="slidingList3"><ul><li >最新更新</li></ul></div><div   id="iwvjtn8m0"   class="slidingList_none" id="slidingList4"><ul><li >下載排行</li></ul></div><div   id="iwvjtn8m0"   class="slidingList_none" id="slidingList5"><ul><li >分類導航</li></ul></div><div   id="iwvjtn8m0"   class="slidingList_none" id="slidingList6"><ul><li>聊天留言</li><li>企業建站</li><li>論壇社區</li><li>新聞文章</li><li>博客日記</li><li>CMS系統</li><li>學校政府</li><li>影音視頻</li><li>商務商城</li><li>查詢搜索</li><li>人才房產</li></ul></div><div   id="iwvjtn8m0"   class="slidingList_none" id="slidingList7"><ul><li>網址鏈接</li><li>圈子交友</li><li>辦公管理</li><li>小偷采集</li><li>整站程序</li><li>統計調查</li><li>廣告網賺</li><li>上傳下載</li><li>圖片相冊</li><li>主機郵件</li><li>動畫娛樂</li><li>文件管理</li></ul></div><div   id="iwvjtn8m0"   class="slidingList_none" id="slidingList8"><ul><li>聊天留言</li><li>CMS系統</li><li>博客日記</li><li>新聞文章</li><li>論壇社區</li><li>商務商城</li><li>企業建站</li><li>影音視頻</li><li>辦公管理</li><li>圖片相冊</li><li>人才房產</li><li>統計調查</li><li>搜索鏈接</li></ul></div><div   id="iwvjtn8m0"   class="slidingList_none" id="slidingList9"><ul><li>游戲娛樂</li><li>媒體網絡</li><li>窗體界面</li><li>算法相關</li><li>系統相關</li><li>綜合應用</li><li>文件操作</li><li>書籍源碼</li><li>初學實例</li><li>類庫組件</li></ul></div><div   id="iwvjtn8m0"   class="slidingList_none" id="slidingList10"><ul><li>界面編程</li><li>數據庫應用</li><li>報表打印</li><li>多媒體技術</li><li>控件相關</li><li>圖形處理</li><li>網絡相關</li><li>文件操作</li><li>系統相關</li><li>游戲編程</li><li>算法相關</li></ul></div><div   id="iwvjtn8m0"   class="slidingList_none" id="slidingList11"><ul><li>界面編程</li><li>數據庫應用</li><li>算法相關</li><li>控件組件</li><li>圖形處理</li><li>網絡相關</li><li>文件操作</li><li>系統相關</li><li>游戲編程</li></ul></div><div   id="iwvjtn8m0"   class="slidingList_none" id="slidingList12"><ul><li>界面編程</li><li>數據庫應用</li><li>報表打印</li><li>多媒體技術</li><li>控件相關</li><li>圖形處理</li><li>網絡相關</li><li>文件操作</li><li>系統相關</li><li>游戲編程</li><li>算法相關</li></ul></div></div><br /></body></html>

上一篇：Flickr網站的簡潔CSS折疊菜單

下一篇：二級菜單居中的橫向CSS下拉菜單