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

代码简介：模仿微软中国首页的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="#" onmouseover="javascript:gopage(1)">Indexs</a></li>
<li id="m2"><a href="#" onmouseover="javascript:gopage(2)">Services</a></li>
<li id="m3"><a href="#" onmouseover="javascript:gopage(3)">Codes</a></li>
<li id="m4"><a href="#" onmouseover="javascript:gopage(4)">Windows</a></li>
<li id="m5"><a href="#" onmouseover="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

posted @   网页代码站  阅读(507)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从二进制到误差：逐行拆解C语言浮点运算中的4008175468544之谜
· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
阅读排行：
· Windows桌面应用自动更新解决方案SharpUpdater5发布
· 我的家庭实验室服务器集群硬件清单
· C# 13 中的新增功能实操
· Supergateway：MCP服务器的远程调试与集成工具
· Vue3封装支持Base64导出的电子签名组件
点击右上角即可分享
微信分享提示
AI原生IDE