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

代码简介：

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

代码内容：

<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

Css实现的鼠标滑动选项卡菜单代码相关推荐

很棒带阴影的JS+CSS滑动门菜单代码
代码简介: 绝对值得一看的CSS滑动门,因为它在鼠标放上后自动弹出一个带阴影的层,无操作的情况下层会自动隐藏,这样更节省网页布局,而且它的风格也很清新,淘宝网有这种效果,没有用到任何修饰图片,绝对不容 ...
Js+Css打造的红色经典伸缩菜单代码
代码简介: JS+Css伸缩菜单,红色,很好看.注:IE6下好像有点不正常,用的朋友自己修正下! 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
CSS写的青色漂亮导航菜单代码
代码简介: 简洁型的CSS导航菜单,没有用到图片,但看着很舒服,老外网站的东西,CSS代码很简洁,复制代码即可使用. 代码内容: <!DOCTYPE HTML PUBLIC "-//W ...
html如何设置鼠标选中状态,怎么用CSS 设置当鼠标移动到菜单时,该按钮变色,鼠标点击后,页面停留在鼠标滑过时的状态!!很急!...
用javascript就可以,基本代码在下面,你自己照着改吧 html head meta http-equiv=Content-Type content=text/html;charset = gb ...
JS+CSS竖向折叠滑动菜单代码
代码简介: 折叠菜单,竖向展开,点击时缓慢展开,展开后可以作为菜单的栏目介绍等,还算不错. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
静态html左侧导航菜单代码,Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码...
本文介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码,分享给大家,具体如下: PC端移动端代码左侧导航 *{ margin:0; padding:0; } #header ...
css菜单缓慢滑动_如何使用HTML，CSS和JavaScript构建滑动菜单栏
css菜单缓慢滑动 by Supriya Shashivasan 由Supriya Shashivasan 如何使用HTML,CSS和JavaScript构建滑动菜单栏 (How to build a ...
仿FLASH动感十足鼠标滑过放大的菜单代码
代码简介: 一款动感十足的仿FLASH菜单,当鼠标滑过菜单某一项的时候,该项会自动变大,其它菜单则减小,如果鼠标滑过的速度很快,那这款菜单就会出现操作感极强的菜单效果,不明白的可运行一下代码便知. 代 ...
可自动定时切换的选项卡/滑动门导航代码
代码简介: 这个滑动门特效不错,可以设定时间,自动循环切换,也可以鼠标控制,而且选项卡也比较漂亮,在新浪和百度见到过这种自动切换的TAB,很实用,代码也简洁. 代码内容: <!DOCTYPE h ...

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

Css实现的鼠标滑动选项卡菜单代码相关推荐

最新文章

热门文章