无限级树形菜单,CSS样式有个问题想请教下

小飞牛coder 2013-07-21 08:32:35
功能已经实现了,但是怎样动态的为子节点添加样式,第一个子节点的margin-left:10,子节点的子节点是margin-left:20,子节点的子节点的子节点是margin-left:30,依次推。这个怎么实现呢?我表达的能理解么?我怕我说的不太清楚。
...全文
135 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
csdn_aspnet 2013-08-07
  • 打赏
  • 举报
回复
树型菜单可以显示出一个比较明晰的结构,给予人一目了然的感觉。   菜单分为以下几种情况:   1、有子菜单的菜单,这里称文件夹菜单;     1.1、打开的文件夹菜单;       1.1.1、不是最后位置的打开的文件夹菜单,如图:点击查看原图;       1.1.2、最后位置的打开的文件夹菜单,如图:点击查看原图;     1.2、关闭的文件夹菜单;       1.2.1、不是最后位置的关闭的文件夹菜单,如图:点击查看原图;       1.2.2、最后位置的关闭的文件夹菜单,如图:点击查看原图;   2、无子菜单的菜单;     2.1、不是最后位置的无子菜单的菜单,如图:点击查看原图;     2.2、最后位置的无子菜单的菜单,如图:点击查看原图;   HTML代码: <div id="wrapper"> <div class="qxd_tree"> <div class="qxd_tree_node"> <a href="#" class="qxd_has_drop qxd_drop_show"><span>菜单一</span></a> <div class="qxd_tree_node"> <a href="#" class="qxd_no_drop qxd_cur"><span>子菜单一</span></a> <a href="#" class="qxd_has_drop qxd_drop_show"><span>子菜单二</span></a> <div class="qxd_tree_node"> <a href="#" class="qxd_no_drop"><span>子菜单二一</span></a> <a href="#" class="qxd_no_drop"><span>子菜单二二</span></a> </div> <div class="qxd_tn_last"> <a href="#" class="qxd_has_drop qxd_drop_show qxd_unfold_last_menu"><span>子菜单三</span></a> <div class="qxd_tree_node"> <a href="#" class="qxd_no_drop"><span>子菜单三一</span></a> <a href="#" class="qxd_no_drop qxd_last_menu"><span>子菜单三二</span></a> </div> </div> </div> </div> <div class="qxd_tree_node"> <a href="#" class="qxd_no_drop"><span>菜单二</span></a> </div> <div class="qxd_tree_node"> <a href="#" class="qxd_has_drop qxd_drop_show"><span>菜单三</span></a> <div class="qxd_tree_node"> <a href="#" class="qxd_no_drop"><span>子菜单一</span></a> <a href="#" class="qxd_no_drop qxd_last_menu"><span>子菜单二</span></a> </div> </div> <div class="qxd_tree_node"> <a href="#" class="qxd_has_drop qxd_drop_hidden"><span>菜单四</span></a> <div class="qxd_tree_node collapse"> <a href="#" class="qxd_no_drop"><span>子菜单一</span></a> <a href="#" class="qxd_no_drop"><span>子菜单二</span></a> </div> </div> <div class="qxd_tn_last"> <div class="qxd_tree_node"> <a href="#" class="qxd_no_drop qxd_last_menu"><span>菜单五</span></a> </div> </div> </div> </div> <!--[if IE 6]> <script type="text/javascript"> document.execCommand('BackgroundImageCache', false, true); </script> <![endif]-->   这里每个菜单区块用了一个类为qxd_tree_node的div包了起来,以实现无限嵌套,当菜单区块最为最后一个时,又多给了一个div的 容器,类名为qxd_tn_last,用于遮住竖起虚线,因为这里是菜单图片用的是css背景的方式,所以最后一个区块做了单独处理。   CSS代码: body,div,ul,li,a,h2 { margin: 0; padding: 0; } body { font: 12px/1.6 Arial; } a { text-decoration: none; } #wrapper { margin: 100px; } .qxd_tree a { display: block; width: 80px; height: 18px; line-height: 18px; *line-height: 21px; overflow: hidden; margin-left: -15px; padding-left: 15px; } .qxd_tree .qxd_tree_node a span { display: block; } .qxd_tree .qxd_tree_node { padding-left: 15px; background: url(images/tree-line.gif) repeat-y; } .qxd_tree .qxd_tree_node .qxd_has_drop { background: url(images/bg_qxd_tree.gif) no-repeat 0 -218px; } .qxd_tree .qxd_tree_node .qxd_fold_last_menu { background: #fff url(images/bg_qxd_tree.gif) no-repeat 0 1px; } .qxd_tree .qxd_tree_node .qxd_has_drop span { padding-left: 17px; background: url(images/bg_qxd_tree.gif) no-repeat 0 -365px; } .qxd_tree .qxd_tree_node .qxd_drop_hidden span { background: url(images/bg_qxd_tree.gif) no-repeat 0 -292px; } .qxd_tree .qxd_tree_node .qxd_no_drop span { padding-left: 17px; background: url(images/bg_qxd_tree.gif) no-repeat 1px -587px; } .qxd_tree .qxd_tree_node .qxd_drop_show { background: url(images/bg_qxd_tree.gif) no-repeat 0 -144px; } .qxd_tree .qxd_tree_node .qxd_unfold_last_menu { background: #fff url(images/bg_qxd_tree.gif) no-repeat 0 -73px; } .qxd_tree .qxd_tree_node a.qxd_no_drop { background: url(images/bg_qxd_tree.gif) no-repeat 0 -439px; } .qxd_tree .qxd_tree_node a.qxd_last_menu { background: #fff url(images/bg_qxd_tree.gif) no-repeat 0 -519px; } .qxd_tree .qxd_tree_node .qxd_cur { font-weight: bold; } .qxd_tree .qxd_tree_node .collapse { display: none; } /*为了遮住虚线*/ .qxd_tree .qxd_tn_last { background: #fff; position: relative; left: -15px; } .qxd_tree .qxd_tn_last .qxd_tree_node { margin-left: 15px; } .qxd_tree .qxd_tn_last .qxd_has_drop { margin-left: 0px; }   很多树型菜单的图片都是采用img形式,做完此效果后,我发现可能用img形式会简单点,但我还是采用了css图片方式,图片方式要对背景进行处理,最主要的就是遮住虚线,这里在子节点给了白色背景颜色遮住父节点的背景图片。   HTML与CSS是为编写JS打下基石,在此基石之上再去编写JS,就会容易点了。
hookee 2013-07-22
  • 打赏
  • 举报
回复
要看DOM的结构,如果节点元素都一样,只要设置margin-left:10px, 用包含的层次实现即可。 <div class="node"> <div class="node"> <div class="node"></div> </div> </div>

28,390

社区成员

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧