Css实现的鼠标滑动选项卡菜单代码

最新推荐文章于 2024-03-12 10:31:17 发布

weixin_34191845

最新推荐文章于 2024-03-12 10:31:17 发布

阅读量422

点赞数

原文链接：http://www.cnblogs.com/webdm/archive/2011/03/14/1983218.html

版权

代码简介：

流行鼠标滑动菜单，实际上这是一个大家常说的滑动门特效，鼠标经过后相应版块随之变化。

代码内容：

<html>
<head>
<title>Css实现的鼠标滑动选项卡菜单代码_网页代码站(www.webdm.cn)</title>
<style type="text/css">
<!--
body {
margin: 0px;
}
#header {
background-color: #ffffff;
height: 286px;
width: 687px;
margin: 0px;
padding: 0px;
border: 1px solid #CCCCCC;
font-size: 12px;
}
#menu {
margin: 0px;
padding: 0px;
list-style:none;
}
#menu li {
list-style:none;
display: block;
width: 137px;
height: 23px;
text-align: center;
float: left;
margin: 0px;
padding-right: 0px;
padding-left: 0px;
line-height: 23px; height: 23px
}
.sec1 { background-image: url(http://www.webdm.cn/images/20090919/btn_bg.gif);float: left;list-style-type: none; height: 23px;border-right:1px 

solid #B0BEC7;border-bottom:1px solid #B0BEC7;}
.sec2 { background: url(http://www.webdm.cn/images/20090919/btn_select.gif);position: relative; height: 23px;border-right:1px solid 

#B0BEC7;border-bottom:1px solid #FFFFFF;color: #FF0000}
.block { display: block;list-style:none;}
.unblock { display: none;list-style:none;}
.pic img {
  padding:  3px;
  border:  1px  solid  #ccc;
}
-->
</style>
</head>
<body>
<script language=javascript>
function secBoard(n)
{
for(i=0;i<menu.childNodes.length;i++)
menu.childNodes[i].className="sec1";
menu.childNodes[n].className="sec2";
for(i=0;i<main.childNodes.length;i++)
main.childNodes[i].style.display="none";
main.childNodes[n].style.display="block";
}
</script>
<div id="header">
  <ul id="menu">
    <li onMouseOver="secBoard(0)" class="sec2">WebDm.Cn</li>
    <li onMouseOver="secBoard(1)" class="sec1">ASP</li>
    <li onMouseOver="secBoard(2)" class="sec1">PHP</li>
    <li onMouseOver="secBoard(3)" class="sec1">EXTJS</li>
    <li onMouseOver="secBoard(4)" class="sec1">JSP</li>
  </ul>
  <ul id="main">
    <li class="block">
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</li>
    <li class="unblock">ASP的内容</li>
    <li class="unblock">PHP的内容</li>
    <li class="unblock">EXTJS的内容</li>
    <li class="unblock">JSP的内容</li>
  </ul>
</div>
</body>
</html>
<br>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！

代码来自：http://www.webdm.cn/webcode/0988db7c-6736-4857-9065-6e48d17964e4.html

转载于:https://www.cnblogs.com/webdm/archive/2011/03/14/1983218.html

weixin_34191845

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Css实现的鼠标滑动选项卡菜单代码

代码简介：流行鼠标滑动菜单，实际上这是一个大家常说的滑动门特效，鼠标经过后相应版块随之变化。代码内容：<html><head><title>Css实现的鼠标滑动选项卡菜单代码_网页代码站(www.webdm.cn)</title><style type="text/css"><!--body {...
复制链接

扫一扫