html展开折叠菜单教程（怎么用html和css实现标签折叠）

本文目录

• 怎么用html和css实现标签折叠
• html中伸缩菜单是怎么做出来的
• html 折叠菜单
• 网页折叠菜单
• 左侧菜单栏折叠展开效果-超级简单
• HTML5怎么做出苹果折叠菜单的效果

怎么用html和css实现标签折叠

用html和css实现标签折叠，代码如下：

***隐藏网址***

***隐藏网址***

《head》

***隐藏网址***

《title》用html和css实现标签折叠《/title》

《/head》

《body》

《ul id="fm"》

        《li》《a href="#"》《h1》折叠标签A《/h1》

            《span》这里是描述标签A《/span》

《span》这里是描述标签A《/span》

《span》这里是描述标签A《/span》

《/a》《/li》

        《li》《a href="#"》《h1》折叠标签B《/h1》

            《span》这里是描述标签B《/span》

《span》这里是描述标签B《/span》

《span》这里是描述标签B《/span》《/a》

        《li》《a href="#"》《h1》折叠标签C《/h1》

            《span》这里是描述标签C《/span》

《span》这里是描述标签C《/span》

《span》这里是描述标签C《/span》《/a》

《li》《a href="#"》《h1》折叠标签D《/h1》

            《span》这里是描述标签D《/span》

《span》这里是描述标签D《/span》

《span》这里是描述标签D《/span》《/a》

    《/ul》

《/body》

《/html》

CSS样式为：

《style type="text/css"》

#fm{

    overflow:hidden;

    background-color:#FFCCCC;

    width:200px;

    height:500px;

    overflow:hidden;

}

#fm h1{

    margin:0px;

    color:#FF3333;

    font-size:14px;

}

#fm li{

    list-sytle-type:none;

    display:block;

    width:178px;

    border:1px solid #00CCCC;

    border-bottom-width:0px;

}

#fm li.end{

    border-bottom-width:1px;

}

#fm li a{

    display:block;

    text-decoration:none;

    width:100%;

    padding:10px;

}

#fm li a span{

    display:none;

    color:#000000;

    font-size:12px;

    padding-top:10px;

}

#fm li a:hover{

    background:#fff;

}

#fm li a:hover span{

    display:block;

    cursor:hand;

}

《/style》

效果如图：

以上就是用html和css实现标签折叠的解决方法。

html中伸缩菜单是怎么做出来的

html中伸缩菜单，靠当独的一个html或者是css做不出来的，一般是结合jQ或者是js来实现，这里我就用JS来举例吧，主要是做好一个目录，一般是用ul、li去布局好就行，然后在给一个id，在通过Js去获取对象，然后设置鼠标的hover事件就可以了，这里我提交代码：

***隐藏网址***
***隐藏网址***
《head》
《title》简洁实用的二级下拉导航菜单《/title》
***隐藏网址***
《!--把下面代码加到《head》与《/head》之间--》
《style type="text/css"》
body,html{padding:0;margin:0;text-align:center;font:normal 14px ’arial’;}
#mainNavBar{width:100%;background:#999;padding:10px 0;}
#nav{width:760px;height:30px;margin:0 auto;}
#nav ul{padding:0;margin:0;}
#nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;}
#nav ul li a{display:block;color:#fff;text-decoration:none;}
#nav ul li a:hover{font-weight:bold;background:#666;}
#subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;}
#subNav a{text-decoration:none;font-weight:normal;display:block;}
#subNav a:hover{color:#f00;background:#f00;}
《/style》
《/head》
《body》
《!--把下面代码加到《body》与《/body》之间--》
《div id="mainNavBar"》
《div id="nav"》
《ul》
《li》
《a href="#"》Add《/a》
《div id="subNav"》
《a href="#"》写日志《/a》
《a href="#"》增加分类《/a》
《/div》
《/li》
《li》
《a href="#"》Edit《/a》
《div id="subNav"》
《a href="#"》修改分类《/a》
《a href="#"》文章《/a》
《/div》
《/li》
《li》
《a href="#"》Admin《/a》
《div id="subNav"》
《a href="#"》文章管理《/a》
《a href="#"》评论管理《/a》
《a href="#"》留言管理《/a》
《a href="#"》退出《/a》
《/div》
《/li》
《/ul》
《/div》
《/div》
《script language="javascript"》
var nav=document.getElementById("nav").getElementsByTagName("li");
for(i=0;i《nav.length;i++){
nav.onmouseover=function(){
this.style.fontWeight="bold";
this.style.overflow="visible";
this.style.background="#666666";
}
nav.onmouseout=function(){
this.style.fontWeight="normal";
this.style.background="#999999"
this.style.overflow="hidden";
}
}
《/script》
《/body》
《/html》
#header #shousuo{
width:950px;
height:50px;
background:#f4f4f4;
margin-top:10px;
}
#shousuo ul li{
line-height:50px;
list-style-type:none;
float:left;
margin-left:5px;
font-weight:bold;
font-size:14px;

html 折叠菜单

《table border="0" cellspacing="0" cellpadding="0"》
《tr》
《td scope="row"》《table border="1"》
《tr》
《td id="showbfq" height="20" align="top" onclick="if(bfq.style.display==’none’){bfq.style.display=’’;showbfq.innerText=’优质’;}
else{bfq.style.display=’none’;showbfq.innerText=’点击更多’;}"》点击更多《/td》
《/tr》
《tr》
《td height="80" align="center" name="bfq" id="bfq" style="display:none;"》aaa《/td》
《/tr》
《/table》《/td》《/tr》
《tr》《td》《table border="1"》
《tr》
《td id="showbfq1" height="20" align="top" onclick="if(bfq1.style.display==’none’){bfq1.style.display=’’;showbfq1.innerText=’优质’;}
else{bfq1.style.display=’none’;showbfq1.innerText=’点击更多’;}"》点击更多《/td》
《/tr》
《tr》
《td height="80" align="center" name="bfq1" id="bfq1" style="display:none;"》bbb《/td》
《/tr》
《/table》《/td》《/tr》
《tr》《td》《table border="1"》
《tr》
《td id="showbfq2" height="20" align="top" onclick="if(bfq2.style.display==’none’){bfq2.style.display=’’;showbfq2.innerText=’优质’;}
else{bfq2.style.display=’none’;showbfq2.innerText=’点击更多’;}"》点击更多《/td》
《/tr》
《tr》
《td height="80" align="center" name="bfq2" id="bfq2" style="display:none;"》ccc《/td》
《/tr》
《/table》《/td》《/tr》
《/table》
一样的，用一个大表格，把它们竖向的框起来。

网页折叠菜单

***隐藏网址***
***隐藏网址***
《head》
***隐藏网址***
《title》每次只展开一组的折叠菜单《/title》
《style type="text/css"》
*{ margin:0px; padding:0px; border:0px; }
body{ font-size:12px; color:#333;text-align:center;}
.ztbox{ background:#fff;}
.ztbox{text-align:left;width:220px;height:auto;border:solid 1px #2173f7;margin:10px auto 0px;overflow: hidden;position: absolute;left: 10px;top: 0px; }
.ztbox h3{font-size:14px;height:22px;line-height:22px;background:#c6d5ff;text-indent:10px;position:relative;border-top: 1px solid #fff;border-bottom: 1px solid #2173f7; font-weight:normal;cursor:pointer;}
.ztbox h3 span{font-weight: normal;position:absolute;top:0;right:6px;}
.ztbox li{border-bottom:dashed 1px #eee;}
.ztbox {border-bottom:solid 1px #2173f7;}
.ztlist{ list-style:disc url(none); margin:6px 10px 6px 20px;}
《/style》
《/head》
《body》
《div id="ztbox" class="ztbox" style="left: 10px; width: 149px;"》
《h3 id="t1" onclick="ShHi(’t1’,’h1’);"》
标题1
《/h3》
《ul class="ztlist" id="h1" style="display:none;"》
《li》
这里可以放很多的内容...
《/li》
《/ul》
《h3 id="t2" onclick="ShHi(’t2’,’h3’);"》
标题2
《/h3》
《ul class="ztlist" id="h3" style="display:none;"》
《li》
这里可以放很多的内容...
《/li》
《/ul》
《/div》
《script type="text/javascript"》
var clickul,clickh;
function $(d){return document.getElementById(d);}//这里声明一个$函数简化了代替了getElementById，以后$(’aa’)就相当于docudocument.getElementById(’aa’);
function f(d){//这个方法用来获得DHTMLElement的style属性（style属性和CSS的是对应的）如果没有这样ID的DHTMLElement则返回空值
var t=$(d);if (t){return t.style;
}else{
return null;
}
}
function Hi(){//隐藏
if(clickul)clickul.style.display=’none’;
}
function Hl(){//把层的字体变回正常
if(clickh)clickh.style.fontWeight=’normal’;
}
function h(d){//判断这个DHTMLElement是不是隐藏的
var s=f(d);
var b=s.display;
if (b==’none’){
return true;
}else{
return false;
}
}
function ShHi(ii,jj){
if(h(jj)){//判断是不是隐藏
Hi();
Hl();
f(jj).display=’block’;//把jj(传入来的参数)为ID的层显示出来
f(ii).fontWeight=’bold’;//字体变为‘BOLD’
clickul=$(jj);clickh=$(ii);
}else{//如果JJ不隐藏，执行下面的
Hi();
Hl();
f(jj).display=’none’;//隐藏
f(ii).fontWeight=’normal’;//字体变回正常
clickul=null;clickh=null;
}
}《/script》《/body》《/html》
不明白“和添加菜单的下滑时间功能”是什么功能
所以没有写
任何疑问：
blog.csdn.net/shmilyhe
或
shmilyhe@163.com

左侧菜单栏折叠展开效果-超级简单

分享一个常见于管理后台的左侧菜单栏折叠展开的效果，基于jquery，效果图如下：

一：页面结构：

二：页面样式css，放在head标签里

三：引入jquery文件

四：给一级菜单绑定点击事件，点击时展开下面的子菜单

五：给二级菜单绑定事件，点击时加入选中的深色背景

六：阻止二级菜单点击发生冒泡，当点击二级菜单的时候，一级菜单的事件也会发生，此时二级菜单会被收起，因此需要阻止事件冒泡

***隐藏网址***
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流

HTML5怎么做出苹果折叠菜单的效果

1、在网页《head》区添加以下样式定义 ：
《style type="text/css"》
#dlmenu {height:10em;}
#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:15em; background:#fff; z-index:100;}
#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {background:#d4d8bd url(top_grad_2.gif) center center; color:#ff0; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {height:20em; background:#b4be9c url(sub_grad.gif);}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;}
#menu dl {width: 15em; margin: 0; background: #6f9c6f; cursor:pointer;}
#menu dt {margin:0; padding: 0; font-size: 1.1em; border-top:1px solid #cce;}
#menu dd {margin:0; padding:0; font-size: 1em; text-align:left; }
.gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 10px; background:#949e7c url(top_grad.gif) center center;}
.gallery dd a, .gallery dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background:#b4be9c url(sub_grad.gif);}
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover {background:#7aa; color:#ff0;}
《/style》
2、在网页《body》区添加菜单HTML代码
《div id="dlmenu"》
《ul id="menu"》
《li》
《!----》
《dl class="gallery"》
《dt》《a href="../menu/index.html"》DEMOS《/a》《/dt》
《dd》《a href="../menu/zero_dollars.html" title="The zero dollar ads page"》zero dollars《/a》《/dd》
《dd》《a href="../menu/embed.html" title="Wrapping text around images"》wrapping text《/a》《/dd》
《dd》《a href="../menu/form.html" title="Styling forms"》styled form《/a》《/dd》
《dd》《a href="../menu/nodots.html" title="Removing active/focus borders"》active focus《/a》《/dd》
《dd》《a href="../menu/shadow_boxing.html" title="Multi-position drop shadow"》shadow boxing《/a》《/dd》
《dd》《a href="../menu/old_master.html" title="Image Map for detailed information"》image map《/a》《/dd》
《dd》《a href="../menu/bodies.html" title="fun with background images"》fun with backgrounds《/a》《/dd》
《dd》《a href="../menu/fade_scroll.html" title="fade-out scrolling"》fade scrolling《/a》《/dd》