这是一个使用CSS和JavaScript实现的竖栏导航菜单效果。通过点击菜单项，展示对应的子内容区域，适用于系统分类或主题导航。菜单包括系统问题、图形图像、办公应用、编程开发、数字艺术、软件新闻、病毒安全、图书连载和视频中心等板块。
<style type="text/css">
body{text-align:center;}
*{ margin:0px; padding:0px;}
.rightChangeCon{ width:220px; margin:0 auto; border:1px solid #D3D3D3;}
.rightChangeCon .nav{ width:98px; float:left;}
.rightChangeCon .navBg1{ background:url(http://cimg2.163.com/tech/img07/xy/img07/bgC11.gif) no-repeat;}
.rightChangeCon .nav ul{}
.rightChangeCon .nav li{ list-style-type:none; height:28px; width:98px;}
.rightChangeCon .nav li h5{ text-align:left; font-size:12px; font-weight:normal; background:url(http://cimg2.163.com/tech/img07/xy/img07/i6.gif) 10px 10px no-repeat; color:#1f3a87; padding:9px 0 0 25px;}
.rightChangeCon .nav li h6{ text-align:left; font-size:12px; font-weight:normal; background:url(http://cimg2.163.com/tech/img07/xy/img07/i7.gif) 10px 10px no-repeat; padding:9px 0 0 25px;}
.rightChangeCon .nav li h6 a{ color:#000;}
.rightChangeCon .nav li h6 a:hover{ color:#bc2931;}
.rightChangeCon .con{ width:120px; float:right; font-size:12px;}
.rightChangeCon .con ul{ padding:5px 0 0 0;}
.rightChangeCon .con li{ text-align:left; list-style-type:none; background:url(http://cimg2.163.com/tech/img07/xy/img07/i8.gif) 8px 6px no-repeat; color:#4F514F; padding:5px 0 4px 22px; width:100px;}
.rightChangeCon .con li a{ color:#4F514F;}
.rightChangeCon .con li a:hover{ color:#bc2931;}
</style>
<div class="rightChangeCon">
<script language="javascript">
function slay(num)
{
for(var id = 1;id<=9;id++)
{
var ss="xxx"+id;
var ss1="xx"+id;
var ss2="xlist"+id;
var vv= document.getElementById(ss1).innerHTML;
if(id==num)
{
document.getElementById(ss).innerHTML="<h5><span id=/""+ss1+"/">"+vv+"</span></h5>";
document.getElementById(ss2).style.display="block";
}else{
document.getElementById(ss).innerHTML="<h6><a href=/"javascript:slay("+id+")/" target
最低0.47元/天 解锁文章
扫一扫
1704
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
