仿站长网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 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 id="nav_box"><h4 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','slidingList','1');this.blur();">网站首页</h4><div id="line"></div><h4 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','slidingList','2');this.blur();">网页特效</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 >首页</li><li >分类导航</li><li >最新更新</li><li >下载排行</li></ul></div><div class="slidingList_none" id="slidingList2"><ul><li  > 层和布局</li><li  > 菜单导航</li><li  > 表单及按钮</li></ul></div><div class="slidingList_none" id="slidingList3"><ul><li >最新更新</li></ul></div><div class="slidingList_none" id="slidingList4"><ul><li >下载排行</li></ul></div><div class="slidingList_none" id="slidingList5"><ul><li >分类导航</li></ul></div><div 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 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 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 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 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 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 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下拉菜单