JavaScript纯文字折叠菜单

2024-09-05 12:19:42

字体：大中小

来源：转载

供稿：网友

JavaScript纯文字折叠菜单，类似淘宝网一样的管理菜单，非常纯净，如果你想为每个菜单加上背景，你可以修改CSS中调用的一个GIF图，改变图片的样式就可以改变背景，实用方便。

<html><head><title>折叠菜单</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript">  </script> <style type="text/css"> body { font-size:12px; margin:20px; padding:0; text-align:left;} dl,dt,dd,ul,ol,li,p,div,input,h1,h2,h3,h4,h5,h6 { margin:0; padding:0;} li { list-style:none;} .libiao_menu { margin-bottom:15px;} .libiao_menu h3 a { margin-top:15px; margin-bottom:15px; display:block; width:130px; height:28px; font-size:14px; text-align:left; padding-left:65px; padding-top:13px; color:#0066cc;} .libiao_menu dl { margin-left:30px; margin-top:5px;} .libiao_menu dl dt { font-size:14px; line-height:24px;} .libiao_menu dl dt a { padding-left:13px; color:#333;} .libiao_menu dl dt a.rights { background:url(/jscss/demoimg/200905/dots.gif) no-repeat 0 3px;} .libiao_menu dl dt a.xias { background:url(/jscss/demoimg/200905/dots.gif) no-repeat 0 -41px;} .libiao_menu dl dd { padding-left:20px;} .libiao_menu dl dd ul {} .libiao_menu dl dd ul li { font-size:14px; line-height:24px;} .libiao_menu dl dd ul li a { color:#06c;} </style></head><body> <div class="libiao_menu">         <dl>             <dt>我的网上订单</dt>             <dd id="items0" style="display: block;">                 <ul>                     <li>所有订单</li>                     <li>未付款订单</li>                     <li>处理中的订单</li>                 </ul>             </dd>         </dl>         <dl>             <dt>帐户管理</dt>             <dd id="items1" style="display: block;">                 <ul>                     <li>我的余额</li>                     <li>管理地址</li>                 </ul>             </dd>         </dl>         <dl>             <dt>我的个人助手</dt>             <dd id="items2" style="display: block;">                 <ul>                     <li>我的收藏夹</li>                     <li>我的购物记录</li>                 </ul>             </dd>         </dl>         <dl>             <dt>个人信息管理</dt>             <dd id="items3" style="display: block;">                 <ul>                     <li>编辑资料</li>                     <li>修改密码</li>                 </ul>             </dd>         </dl>     </div></body></html>

上一篇：通用的后台左侧管理菜单

下一篇：向上展开的半透明菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注