仿微软中国的滑动门导航菜单代码

最新推荐文章于 2022-03-09 00:14:38 发布

weixin_33895695

最新推荐文章于 2022-03-09 00:14:38 发布

阅读量135

点赞数

原文链接：http://www.cnblogs.com/webdm/archive/2011/04/09/2010119.html

版权

代码简介：模仿微软中国首页的CSS滑动门（TABS），竖向排列的选项卡，比较漂亮，要用到3个图片，点击运行可以看到效果，图片请自行下载。

代码内容：

<!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>
<title>仿微软中国的滑动门导航菜单代码_网页代码站(www.webdm.cn)</title>
<style type="text/css">
body{margin:0; padding:0; text-align:center; font-family:arial, sans-serif; font-size:12px}
p{padding:0; margin:0; line-height:1.5em}
#wrap{border:1px solid #A2A7AB; margin:20px auto; padding:8px; text-align:left; width:500px; background:url

(http://www.webdm.cn/images/20090922/wrap11.jpg)}
#menu{float:left; width:22%; background:url(http://www.webdm.cn/images/20090922/menu11.jpg) no-repeat right 

center}
#menu ul{list-style:none; margin:0; padding:0}
#menu li{height:25px; line-height:25px; text-align:right}
#menu a{color:#000; text-decoration:none; display:block; padding-right:25px}
#menu a:hover,#menu .on a{background:url(http://www.webdm.cn/images/20090922/over11.jpg) no-repeat right 

center; color:#039}
#content{float:right; width:70%}
#content h1{font-size:16px; font-weight:normal; margin:0; padding:0; margin-bottom:8px}
#content ul{list-style:none; margin:0; padding:0}
#content li{padding:3px}
#copy{clear:both}
</style>
<script type="text/javascript">
<!--
//切换到相关页
function gopage(n) 
{
  var tag = document.getElementById("menu").getElementsByTagName("li");
  var taglength = tag.length;

  for (i=1;i<=taglength;i++)
  {
    document.getElementById("m"+i).className="";
    document.getElementById("c"+i).style.display='none';
  }
    document.getElementById("m"+n).className="on";
    document.getElementById("c"+n).style.display='';
}
//-->
</script>
</head>
<body>
<div id="wrap">
<div id="menu">
<ul>
<li id="m1" class="on"><a href="#" οnmοuseοver="javascript:gopage(1)">Indexs</a></li>
<li id="m2"><a href="#" οnmοuseοver="javascript:gopage(2)">Services</a></li>
<li id="m3"><a href="#" οnmοuseοver="javascript:gopage(3)">Codes</a></li>
<li id="m4"><a href="#" οnmοuseοver="javascript:gopage(4)">Windows</a></li>
<li id="m5"><a href="#" οnmοuseοver="javascript:gopage(5)">Offices</a></li>
</ul>
</div>
<div id="content">
<div id="c1">
<h1>Indexs</h1>
<ul>
 <li><a href="/" target="_blank">Ajax无刷新评论（ASP.net+Jquery）</a></li><li><a href="/" target="_blank">VB仿

Vista风格真彩色图标按钮控件</a></li><li><a href="/" target="_blank">PHP 生成HTML静态列表分页实例</a></li><li><a 

href="/" target="_blank">乘风ASP多用户计数器Access版 v3.93</a></li>
</ul>
</div>
<div id="c2" style="display:none">
<h1>Services</h1>
<ul>
<li><a href="/" target="_blank">QvodCMS视频点播专家 ASP v1.8</a></li><li><a href="/" target="_blank">ZenPhoto 

PHP图库系统 v1.2.1</a></li><li><a href="/" target="_blank">MyPic 七夜图片管理系统PHP版 v2.0</a></li><li><a 

href="/" target="_blank">Angel Upload PHP多文件上传与下载程序</a></li>
</ul>
</div>
<div id="c3" style="display:none">
<h1>Codes</h1>
<ul>
<li><a href="/" target="_blank">VB版网页照相机（抓取网页并保存为BMP）</a></li><li><a href="/" target="_blank">

将图片地址加入文本框的PHP文件上传程序</a></li><li><a href="/" target="_blank">Mini File Host PHP上传程序 v1.5 

中文版</a></li><li><a href="/" target="_blank">复活小说站（终点小说系统内核）ASP版</a></li>
</ul>
</div>
<div id="c4" style="display:none">
<h1>Windows</h1>
<ul>
<li><a href="/" target="_blank">VB读写PNG并处理为透明背景物操作示例</a></li><li><a href="/" target="_blank">经

典游戏下载：疯狂对对碰J2ME源码版</a></li><li><a href="/" target="_blank">VB支持中文的平滑字体滚动特效

</a></li><li><a href="/" target="_blank">给VB6编辑器添加鼠标滚轮的功能</a></li>
</ul>
</div>
<div id="c5" style="display:none">
<h1>Offices</h1>
<ul>
<li><a href="/" target="_blank">支持断点续传带进度条的VB下载控件</a></li><li><a href="/" target="_blank">《代码

大全》中文第一、二版（PDF）</a></li><li><a href="/" target="_blank">VB根据数字报语音的程序</a></li><li><a 

href="/" target="_blank">《数据库系统概念》电子版 (PDF)</a></li>
</ul>
</div>
</div>
<div id="copy">
<p>© 2009 Design by <a href="/">WebDn.Cn</a></p>
</div>
</div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/9847ecdb-1787-4545-9479-992bfa3f75b4.html

转载于:https://www.cnblogs.com/webdm/archive/2011/04/09/2010119.html