html 折叠菜单

html 折叠菜单,第1张

<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>

一样的,用一个大表格,把它们竖向的框起来。

1、在网页<head>区添加以下样式定义 :

<style type="text/css">

#dlmenu {height:10em}

#menu {list-style-type:nonemargin:0 0 10pxpadding:0position:absolutewidth:15embackground:#fffz-index:100}

#menu li {display:blockpadding:0margin:0position:relativez-index:100}

#menu li a, #menu li a:visited {display:blocktext-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 centercolor:#ff0}

#menu li:hover dd, #menu li a:hover dd {display:block}

#menu li:hover dl, #menu li a:hover dl {height:20embackground:#b4be9c url(sub_grad.gif)}

#menu table {border-collapse:collapsepadding:0margin:-4pxfont-size:1em}

#menu dl {width: 15emmargin: 0background: #6f9c6fcursor:pointer}

#menu dt {margin:0padding: 0font-size: 1.1emborder-top:1px solid #cce}

#menu dd {margin:0padding:0font-size: 1emtext-align:left}

.gallery dt a, .gallery dt a:visited {display:blockcolor:#fffpadding:5px 5px 5px 10pxbackground:#949e7c url(top_grad.gif) center center}

.gallery dd a, .gallery dd a:visited {color:#000min-height:1emtext-decoration:nonedisplay:blockpadding:4px 5px 4px 20pxbackground:#b4be9c url(sub_grad.gif)}

* html .gallery dd a, * html .gallery dd a:visited {height:1em}

.gallery dd a:hover {background:#7aacolor:#ff0}

</style>

2、在网页<body>区添加菜单HTML代码

<div id="dlmenu">

<ul id="menu">

<li>

<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->

<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>

不太理解你要什么,看看下面这段代码实现的效果是你想要的吗?

<style>div{font-size:12pxcolor:redbackground-color: #EAEAE8border: 1 solid #1892B5padding: 1}</style>

<div id="main1" style="color:blue" onclick="document.all.child1.style.display=(document.all.child1.style.display =='none')?'':'none'" >

+ 主目录1</div>

<div id="child1" style="display:none">

<a href="#">- 子目录1</a><br>

<a href="#">- 子目录2</a><br>

<a href="#">- 子目录3</a><br>

<a href="#">- 子目录4</a>

</div>

<div id="main2" style="color:blue" onclick="document.all.child2.style.display=(document.all.child2.style.display =='none')?'':'none'" >

+ 主目录2 </div>

<div id="child2" style="display:none">

<a href="#">- 子目录1</a><br>

<a href="#">- 子目录2</a><br>

<a href="#">- 子目录3</a>

</div>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6298703.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-20
下一篇 2023-03-20

发表评论

登录后才能评论

评论列表(0条)

保存