当前位置：懒人建站 > 网页特效 > 类似QQ的竖向展开折叠菜单HTML+CSS结构

类似QQ的竖向展开折叠菜单HTML+CSS结构

作者：佳明妈来源：懒人建站 2009-11-17 人气：

类似QQ的竖向展开折叠菜单,HTML+CSS结构,非常易于修改。看下面的代码片段，结构异常清晰明了，采用了<h2></h2>做栏目标题，符合SEO优化的HTML结构语义化写法，下面的DIV层中可以书写任

<!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">
<title>类似QQ的竖向展开折叠菜单HTML+CSS结构_懒人建站 http://www.51xuediannao.com</title>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name="keywords" content="HTML+CSS模板,HTML+CSS教程,HTML+CSS导航菜单,FLSH焦点图,网页特效" />
<meta name="description" content="懒人建站为您提供-HTML+CSS模板，HTML+CSS教程，JS广告代码，HTML+CSS导航菜单，FLSH焦点图片，国外网页设计欣赏与模板和CSS技巧。" />
<head>
<style type="text/css">
body{margin:10px;padding:10px;}
body,h2,div,span,li{font-size:12px;}
.title01,.title02 {color:#fff;font-weight:bold;}
#DoorP{border:12px solid #eee;width:150px;padding:4px;background:#fff;}
h2{text-align:center;margin:0px;padding:0px;line-height:22px;}
.title01{width:100%;height:25px;background:#99cc00;cursor:pointer;}
.title02{width:100%;height:25px;background:#006600;cursor:pointer;}
.content{
background:#eee;
border-bottom:2px solid #fff;
overflow:hidden;
color:#666;
padding-left:4px;
padding-right:4px;
line-height:18px; 
font-family:"宋体"; 
width:100px;
height:1px;
display:block;}
.content a:link,.content a:visited{color:#666666;text-decoration:none;}
.content a:hover{color:#FF6600;text-decoration:underline;}
</style>
</head>
<body>
<div id="DoorP">
  <h2>懒人建站</h2>
  <div class="content"><a href="http://www.51xuediannao.com/js/nav/"> ·导航菜单</a></div>
  <h2>HTML+CSS模板</h2>
  <div class="content"><a href="http://www.51xuediannao.com/HTML+CSS/"> ·HTML+CSS模板</a></div>
  <h2>焦点幻灯</h2>
  <div class="content"><a href="http://51xuediannao.com/JS/Slide/"> ·焦点幻灯_懒人建站</a></div>
  <h2>CSS技巧</h2>
  <div class="content"><a href="http://51xuediannao.com/jiqiao/css/"> ·懒人建站提供CSS技巧</a></div>
  <h2>CSS建站技巧</h2>
  <div class="content"><a href="http://51xuediannao.com/jiqiao/cms/"> ·CSS建站技巧</a></div>
  <h2>JS广告代码</h2>
  <div class="content"><a href="http://51xuediannao.com/JS/AD/"> ·JS广告代码</a></div>
</div>
<script type="text/javascript">
var onum=0;
var closeState=new Array();
var ch=200;
function $(id){if(document.getElementById(id)){return document.getElementById(id);}else{alert("没有找到!")}}
function $tag(id,tagName){return $(id).getElementsByTagName(tagName)}
var Ds=$tag("DoorP","div");
var Ts=$tag("DoorP","h2");
if(Ds.length != Ts.length){alert("初始化失败!");}
function showMe(Cid,Oid){var h=parseInt(Ds[Cid].style.height);var h2=parseInt(Ds[Oid].style.height);var dH=ch;if(h>0){h=h-Math.ceil(h/3);Ds[Cid].style.height=h+"px";};if(h2<dH){h2=h2+Math.ceil((dH-h2)/3);Ds[Oid].style.height=h2+"px";};if(h<=0&&h2>=dH){clearTimeout(closeState[Cid]);return false;};closeState[Cid] = setTimeout("showMe("+Cid+","+Oid+")");}
for(var i=0;i<Ds.length;i++){
if(i==onum){Ds[i].style.height=ch+"px";Ts[i].className="title01";}else{Ds[i].style.height="0px";Ts[i].className="title02";}
Ts[i].value=i;
Ts[i].onclick=function(){if(onum==this.value){return false;};
Ts[onum].className="title02";
Ts[this.value].className="title01";
for(var i=0;i<closeState.length;i++){clearTimeout(closeState[i]);}
   showMe(onum,this.value);
   onum=this.value;
  }
}
</script>

<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
<span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理</a> </span><br>
<a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a><br/>
<span>懒人建站为您提供-各种bolg制作技巧，HTML技巧，CSS技巧和CMS使用技巧</span>
<span>懒人建站只收录实用和能提高用户体验的代码</span>
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
</div>
</body>
</html>

类似QQ的竖向展开折叠菜单,HTML+CSS结构,非常易于修改。
看下面的代码片段，结构异常清晰明了，采用了<h2></h2>做栏目标题，符合SEO优化的HTML结构语义化写法，下面的DIV层中可以书写任意内容。
代码片段：
<div id="DoorP">
<h2>懒人建站</h2>
<div class="content"><a href="http://www.51xuediannao.com/js/nav/"> ·导航菜单</a></div>
<h2>HTML+CSS模板</h2>
<div class="content"><a href="http://www.51xuediannao.com/HTML+CSS/"> ·HTML+CSS模板</a></div>
<h2>焦点幻灯</h2>
<div class="content"><a href="http://51xuediannao.com/JS/Slide/"> ·焦点幻灯_懒人建站</a></div>
<h2>CSS技巧</h2>
<div class="content"><a href="http://51xuediannao.com/jiqiao/css/"> ·懒人建站提供CSS技巧</a></div>
<h2>CSS建站技巧</h2>
<div class="content"><a href="http://51xuediannao.com/jiqiao/cms/"> ·CSS建站技巧</a></div>
<h2>JS广告代码</h2>
<div class="content"><a href="http://51xuediannao.com/JS/AD/"> ·JS广告代码</a></div>
</div>

↓ 查看全文

本文链接：类似QQ的竖向展开折叠菜单HTML+CSS结构https://www.51xuediannao.com/js/texiao/QQnav.html

类似QQ的竖向展开折叠菜单HTML+CSS结构由懒人建站收集整理，您可以自由传播，请主动带上本文链接

懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。

上一篇：HTML+CSS结构鼠标点击折叠展开折叠式菜单
下一篇：鼠标划过显示title说明并且title属性支持html代码

类似QQ的竖向展开折叠菜单HTML+CSS结构

类似QQ的竖向展开折叠菜单HTML+CSS结构-最新评论

网页特效-热门文章

网页特效-推荐文章

活跃用户

类似QQ的竖向展开折叠菜单HTML+CSS结构

类似QQ的竖向展开折叠菜单HTML+CSS结构-相关文章

类似QQ的竖向展开折叠菜单HTML+CSS结构-最新评论

网页特效-热门文章

网页特效-推荐文章

活跃用户