網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>菜單導(dǎo)航特效代碼>

仿站長網(wǎng)JS+CSS首頁導(dǎo)航菜單_菜單導(dǎo)航特效

很好看的一款網(wǎng)站首頁導(dǎo)航條，仿Admin5站長網(wǎng)的導(dǎo)航菜單風(fēng)格，清新藍(lán)色，結(jié)構(gòu)清淅，基于CSS和JavaScript，修改及使用方便，美觀大方。菜單條要用到5個(gè)GIF圖片，點(diǎn)擊運(yùn)行后可自行保存一下。

<!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>仿站長網(wǎng)JS+CSS首頁導(dǎo)航菜單</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(http://p1.mb5u.com/texiao/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(http://p1.mb5u.com/texiao/nav1.jpg);
background-repeat: repeat-x;
}
#slidingBlock h4.menuNo {
font-weight:normal;
color: #fff;
}
#slidingBlock h4.menuOn {
background-image: url(http://p1.mb5u.com/texiao/nav2.jpg);
background-repeat: no-repeat;
background-position: 6px bottom;
color:#1368c2
}
#line{ width:2px; height:33px;
background-image: url(http://p1.mb5u.com/texiao/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(http://p1.mb5u.com/texiao/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 id="slidingBlock">
<script language="javascript">
  function switchmodTag(modtag,modmrc,modk) {
    for(i=1; i <13; i++) {
      if (i==modk) {
        document.getElementById(modtag+i).className="menuOn";document.getElementById(modmrc+i).className="slidingList";}
      else {
        document.getElementById(modtag+i).className="menuNo";document.getElementById(modmrc+i).className="slidingList_none";}
    }
  }
</script><div id="nav_box">
<h4 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','slidingList','1');this.blur();">
網(wǎng)站首頁</h4><div id="line"></div>
<h4 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','slidingList','2');this.blur();">
網(wǎng)頁特效</h4><div id="line"></div>
<h4 class="menuNo" id="mod3" onmouseover="switchmodTag('mod','slidingList','3');this.blur();">
最新更新</h4><div id="line"></div>
<h4 class="menuNo" id="mod4" onmouseover="switchmodTag('mod','slidingList','4');this.blur();">
下載排行</h4><div id="line"></div>
<h4 class="menuNo" id="mod5" onmouseover="switchmodTag('mod','slidingList','5');this.blur();">
源碼分類</h4><div id="line"></div>
<h4 class="menuNo" id="mod6" onmouseover="switchmodTag('mod','slidingList','6');this.blur();">
ASP源碼</h4><div id="line"></div>
<h4 class="menuNo" id="mod7" onmouseover="switchmodTag('mod','slidingList','7');this.blur();">
PHP源碼</h4><div id="line"></div>
<h4 class="menuNo" id="mod8" onmouseover="switchmodTag('mod','slidingList','8');this.blur();">
.NET源碼</h4><div id="line"></div>
<h4 class="menuNo" id="mod9" onmouseover="switchmodTag('mod','slidingList','9');this.blur();">
JAVA源碼</h4><div id="line"></div>
<h4 class="menuNo" id="mod10" onmouseover="switchmodTag('mod','slidingList','10');this.blur();">
DELPHI源碼</h4><div id="line"></div>
<h4 class="menuNo" id="mod11" onmouseover="switchmodTag('mod','slidingList','11');this.blur();">
VC++源碼</h4><div id="line"></div>
<h4 class="menuNo" id="mod12" onmouseover="switchmodTag('mod','slidingList','12');this.blur();">
VB源碼</h4></div>
<div class="slidingList" id="slidingList1">
<ul>
<li ><a href="/">首頁</a></li>
<li ><a href="/sort/">分類導(dǎo)航</a></li>
<li ><a href="/other/lastupdate.shtml">最新更新</a></li>
<li ><a href="/other/top100.shtml">下載排行</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList2">
<ul>
<li  > <a href="/jscss/sort/list_3_1.shtml">層和布局</a></li>
<li  > <a href="/jscss/sort/list_1_1.shtml">菜單導(dǎo)航</a></li>
<li  > <a href="/jscss/sort/list_11_1.shtml">表單及按鈕</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList3">
<ul>
<li ><a href="/other/lastupdate.shtml">最新更新</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList4">
<ul>
<li ><a href="/other/top100.shtml">下載排行</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList5">
<ul>
<li ><a href="/sort/">分類導(dǎo)航</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList6">
<ul>
<li><a href="/sort/list_1_11_1.shtml">聊天留言</a></li><li><a href="/sort/list_1_12_1.shtml">企業(yè)建站</a></li><li><a href="/sort/list_1_13_1.shtml">論壇社區(qū)</a></li><li><a href="/sort/list_1_14_1.shtml">新聞文章</a></li><li><a href="/sort/list_1_145_1.shtml">博客日記</a></li><li><a href="/sort/list_1_29_1.shtml">CMS系統(tǒng)</a></li><li><a href="/sort/list_1_20_1.shtml">學(xué)校政府</a></li><li><a href="/sort/list_1_28_1.shtml">影音視頻</a></li><li><a href="/sort/list_1_21_1.shtml">商務(wù)商城</a></li><li><a href="/sort/list_1_18_1.shtml">查詢搜索</a></li><li><a href="/sort/list_1_32_1.shtml">人才房產(chǎn)</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList7">
<ul>
<li><a href="/sort/list_1_27_1.shtml">網(wǎng)址鏈接</a></li><li><a href="/sort/list_1_15_1.shtml">圈子交友</a></li><li><a href="/sort/list_1_25_1.shtml">辦公管理</a></li><li><a href="/sort/list_1_31_1.shtml">小偷采集</a></li><li><a href="/sort/list_1_26_1.shtml">整站程序</a></li><li><a href="/sort/list_1_16_1.shtml">統(tǒng)計(jì)調(diào)查</a></li><li><a href="/sort/list_1_197_1.shtml">廣告網(wǎng)賺</a></li><li><a href="/sort/list_1_17_1.shtml">上傳下載</a></li><li><a href="/sort/list_1_19_1.shtml">圖片相冊</a></li><li><a href="/sort/list_1_23_1.shtml">主機(jī)郵件</a></li><li><a href="/sort/list_1_24_1.shtml">動畫娛樂</a></li><li><a href="/sort/list_1_84_1.shtml">文件管理</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList8">
<ul>
<li><a href="/sort/list_3_103_1.shtml">聊天留言</a></li><li><a href="/sort/list_3_121_1.shtml">CMS系統(tǒng)</a></li><li><a href="/sort/list_3_122_1.shtml">博客日記</a></li><li><a href="/sort/list_3_106_1.shtml">新聞文章</a></li><li><a href="/sort/list_3_105_1.shtml">論壇社區(qū)</a></li><li><a href="/sort/list_3_113_1.shtml">商務(wù)商城</a></li><li><a href="/sort/list_3_104_1.shtml">企業(yè)建站</a></li><li><a href="/sort/list_3_120_1.shtml">影音視頻</a></li><li><a href="/sort/list_3_117_1.shtml">辦公管理</a></li><li><a href="/sort/list_3_116_1.shtml">圖片相冊</a></li><li><a href="/sort/list_3_124_1.shtml">人才房產(chǎn)</a></li><li><a href="/sort/list_3_111_1.shtml">統(tǒng)計(jì)調(diào)查</a></li><li><a href="/sort/list_3_110_1.shtml">搜索鏈接</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList9">
<ul>
<li><a href="/sort/list_5_80_1.shtml">游戲娛樂</a></li><li><a href="/sort/list_5_82_1.shtml">媒體網(wǎng)絡(luò)</a></li><li><a href="/sort/list_5_99_1.shtml">窗體界面</a></li><li><a href="/sort/list_5_102_1.shtml">算法相關(guān)</a></li><li><a href="/sort/list_5_93_1.shtml">系統(tǒng)相關(guān)</a></li><li><a href="/sort/list_5_90_1.shtml">綜合應(yīng)用</a></li><li><a href="/sort/list_5_89_1.shtml">文件操作</a></li><li><a href="/sort/list_5_88_1.shtml">書籍源碼</a></li><li><a href="/sort/list_5_101_1.shtml">初學(xué)實(shí)例</a></li><li><a href="/sort/list_5_220_1.shtml">類庫組件</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList10">
<ul>
<li><a href="/sort/list_8_163_1.shtml">界面編程</a></li><li><a href="/sort/list_8_161_1.shtml">數(shù)據(jù)庫應(yīng)用</a></li><li><a href="/sort/list_8_166_1.shtml">報(bào)表打印</a></li><li><a href="/sort/list_8_165_1.shtml">多媒體技術(shù)</a></li><li><a href="/sort/list_8_162_1.shtml">控件相關(guān)</a></li><li><a href="/sort/list_8_160_1.shtml">圖形處理</a></li><li><a href="/sort/list_8_159_1.shtml">網(wǎng)絡(luò)相關(guān)</a></li><li><a href="/sort/list_8_158_1.shtml">文件操作</a></li><li><a href="/sort/list_8_157_1.shtml">系統(tǒng)相關(guān)</a></li><li><a href="/sort/list_8_156_1.shtml">游戲編程</a></li><li><a href="/sort/list_8_155_1.shtml">算法相關(guān)</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList11">
<ul>
<li><a href="/sort/list_10_196_1.shtml">界面編程</a></li><li><a href="/sort/list_10_194_1.shtml">數(shù)據(jù)庫應(yīng)用</a></li><li><a href="/sort/list_10_85_1.shtml">算法相關(guān)</a></li><li><a href="/sort/list_10_195_1.shtml">控件組件</a></li><li><a href="/sort/list_10_193_1.shtml">圖形處理</a></li><li><a href="/sort/list_10_192_1.shtml">網(wǎng)絡(luò)相關(guān)</a></li><li><a href="/sort/list_10_191_1.shtml">文件操作</a></li><li><a href="/sort/list_10_190_1.shtml">系統(tǒng)相關(guān)</a></li><li><a href="/sort/list_10_189_1.shtml">游戲編程</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList12">
<ul>
<li><a href="/sort/list_8_163_1.shtml">界面編程</a></li><li><a href="/sort/list_8_161_1.shtml">數(shù)據(jù)庫應(yīng)用</a></li><li><a href="/sort/list_8_166_1.shtml">報(bào)表打印</a></li><li><a href="/sort/list_8_165_1.shtml">多媒體技術(shù)</a></li><li><a href="/sort/list_8_162_1.shtml">控件相關(guān)</a></li><li><a href="/sort/list_8_160_1.shtml">圖形處理</a></li><li><a href="/sort/list_8_159_1.shtml">網(wǎng)絡(luò)相關(guān)</a></li><li><a href="/sort/list_8_158_1.shtml">文件操作</a></li><li><a href="/sort/list_8_157_1.shtml">系統(tǒng)相關(guān)</a></li><li><a href="/sort/list_8_156_1.shtml">游戲編程</a></li><li><a href="/sort/list_8_155_1.shtml">算法相關(guān)</a></li>
</ul>
</div>
</div>
<br />
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2011-02-23

[收藏][報(bào)錯][返回列表]

相關(guān)菜單導(dǎo)航特效：

仿站長網(wǎng)JS+CSS首頁導(dǎo)航菜單_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些