一个精彩的JS+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-Language" content="zh-cn" />

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title> 一个精彩的JS+CSS精彩导航实例</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<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://www.css5.net/images/uppic/200812180856440.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://www.css5.net/images/uppic/200812180856440.jpg);

background-repeat: repeat-x;

}

#slidingBlock h4.menuNo {

font-weight:normal;

color: #fff;

}

#slidingBlock h4.menuOn {

background-image: url(http://www.css5.net/images/uppic/200812180857440.jpg);

background-repeat: no-repeat;

background-position: 6px bottom;

color:#1368c2

}

#line{ width:2px; height:33px;

background-image: url(http://www.css5.net/images/uppic/200812180858210.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://www.css5.net/images/uppic/200812180858590.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();">

环境监测</h4><div id="line"></div>

<h4 class="menuNo" id="mod7" onmouseover="switchmodTag('mod','slidingList','7');this.blur();">

环保考试</h4><div id="line"></div>

<h4 class="menuNo" id="mod8" onmouseover="switchmodTag('mod','slidingList','8');this.blur();">

环境论文</h4><div id="line"></div>

<h4 class="menuNo" id="mod9" onmouseover="switchmodTag('mod','slidingList','9');this.blur();">

环境导航</h4><div id="line"></div>

<h4 class="menuNo" id="mod10" onmouseover="switchmodTag('mod','slidingList','10');this.blur();">

求职招聘</h4><div id="line"></div>

<h4 class="menuNo" id="mod11" onmouseover="switchmodTag('mod','slidingList','11');this.blur();">

供求信息</h4><div id="line"></div>

<h4 class="menuNo" id="mod12" onmouseover="switchmodTag('mod','slidingList','12');this.blur();">

环保论坛</h4></div>

<div class="slidingList" id="slidingList1">

<ul>

<li ><a href="#">国家法律</a></li>

<li ><a href="/">地方法规</a></li>

<li ><a href="/">行政法规</a></li>

<li ><a href="/">部门规章</a></li>

<li ><a href="/">执法解释</a></li>

<li ><a href="/">文件规范</a></li>

<li ><a href="/">国际公约</a></li>

<li ><a href="/">功能区划</a></li>

</ul>

</div>

<div class="slidingList_none" id="slidingList2">

<ul>

<li  > <a href="/">第二个的</a></li>

<li  > <a href="/">第二个的</a></li>

<li  > <a href="/">第二个</a></li>

<li  > <a href="/">第二个的</a></li>

<li  > <a href="/">第二个的</a></li>

<li  > <a href="/">第二个的</a></li>

<li  > <a href="/">第二个的</a></li>

<li  > <a href="/">第二个的</a></li>

<li  > <a href="/">第二个的</a></li>

<li  > <a href="/">第二个的</a></li>

</ul>

</div>

<div class="slidingList_none" id="slidingList3">

<ul>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

</ul>

</div>

<div class="slidingList_none" id="slidingList4">

<ul>

<li> <a href="/">第4个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第4个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

</ul>

</div>

<div class="slidingList_none" id="slidingList5">

<ul>

<li> <a href="/">第5个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第5个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

</ul>

</div><div class="slidingList_none" id="slidingList6">

<ul>

<li> <a href="/">第5个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第5个</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

</ul>

</div><div class="slidingList_none" id="slidingList7">

<ul>

<li> <a href="/">第5个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第5个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

</ul>

</div><div class="slidingList_none" id="slidingList8">

<ul>

<li> <a href="/">第5个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第5个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

</ul>

</div><div class="slidingList_none" id="slidingList9">

<ul>

<li> <a href="/">第5个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第5个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

</ul>

</div><div class="slidingList_none" id="slidingList10">

<ul>

<li> <a href="/">第5个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第5个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

</ul>

</div><div class="slidingList_none" id="slidingList11">

<ul>

<li> <a href="/">第5个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第5个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

</ul>

</div><div class="slidingList_none" id="slidingList12">

<ul>

<li> <a href="/">第5个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第5个的</a></li>

<li> <a href="/">第三个的</a></li>

<li> <a href="/">第三个的</a></li>

</ul>

</div>

</div>

<br />

更多代码请访问 <a href="http://www.css5.net/" target="_blank">CSS5.NET</a>

</body>

</html>


分类: 代码案例  发布: 2019-07-18-星期四   访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    CSS基础    电脑知识   
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程

分类

.NET技术 Web前端 JAVA开发 HTML基础 数据库 CSS基础 电脑知识

随机阅读

02-标识符,关键字和保留字
【MySQL】漫谈MySQL体系结构
javascript之标识(zhi)符、关键字与保留字
《MySQL 性能优化》之理解 MySQL 体系结构
MYSQL性能优化之Mysql体系结构,存储引擎
Python语法的使用和简介
底层剖析 Window 、Activity、 View 三者关系
Unity音量可视化——粒子随声浪跳动
JavaScript中this指向问题
css talbe中td溢出隐藏 div溢出隐藏

最新

div css隐藏内容样式方法
OPPO Reno3 Pro远程守护怎么使用?
XP系统里让IE支持多线程下载怎么设置
qq电脑管家温度检测在哪设置的? QQ电脑管家怎么测电脑的温度
win7禁用ie浏览器方法 win7怎么把桌面的ie隐藏
WinXP笔记本声卡驱动无法成功安装的解决方法
XP⁄Win7共享⁄连接打印机设置详细 xp怎
华为笔记本蓝屏错误0xcoooo428怎么解决
企业如何部署微软Windows 8? Windows 8的开发历史
华为mate9怎样解指纹密码?

推荐阅读

c语言中break语句的作用
undefined是什么意思啊
vscode----vue中HTML代码tab键自动补全
前端该怎么学?推荐一个学习路线!
.Net轻松处理亿级数据--ClickHouse数据操作
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
html5中datalist标签怎么用
DIV CSS字体(font-family)实现字体样式设置
Mysql里表示布尔型的类型是什么
Datalist options 集合,options语法,optio

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16