当前位置：首页 → 问答吧 → 向高手求一个导航型的css代码。如图。

向高手求一个导航型的css代码。如图。

时间：2011-10-12

来源：互联网

点击左边的博客1，出现右图的效果。（在博客1下面出现一个下拉框或弹窗一样的东西。）

作者: yuqunxue 发布时间: 2011-10-12

http://hi.csdn.net/space-10131675-do-album-picid-944339-goto-down.html

作者: yuqunxue 发布时间: 2011-10-12

图片如果显示不出来的话点击：http://hi.csdn.net/attachment/201110/12/10131675_1318409725x3Xt.gif

作者: yuqunxue 发布时间: 2011-10-12

这种应该在编程代码中实现会比较好。。

作者: bear63 发布时间: 2011-10-12

这个你可以发到js区
就是很常见的展开菜单而已
给你个简单的例子
CSS code

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>NoName</title>
<style>
*{padding:0;margin:0;font-size:12px;}
.testDiv{width:198px;height:100px;border:1px solid #ccc;margin:0 0 5px 5px;display:none;}
h5{background:#ccc;width:200px;margin:5px 0 0 5px;height:24px;line-height:24px;cursor:pointer;}
</style>
<script>
function ShowMe(obj){
    var ShowObj=document.getElementById(obj);
    ShowObj.style.display=(ShowObj.style.display=='block')?'none':'block';
}
</script>
</head>
<body>
    <h5 onclick="ShowMe('Div1')">模块1</h5>
    <div id="Div1" class="testDiv"> 第一个栏目 </div>
    <h5 onclick="ShowMe('Div2')">模块2</h5>
    <div id="Div2" class="testDiv"> 第二个栏目 </div>
    <h5 onclick="ShowMe('Div3')">模块3</h5>
    <div id="Div3" class="testDiv"> 第三个栏目 </div>
</body>
</html>