社区
ASP
帖子详情
无限级树形菜单,CSS样式有个问题想请教下
小飞牛coder
2013-07-21 08:32:35
功能已经实现了,但是怎样动态的为子节点添加样式,第一个子节点的margin-left:10,子节点的子节点是margin-left:20,子节点的子节点的子节点是margin-left:30,依次推。这个怎么实现呢?我表达的能理解么?
我怕我说的不太清楚。
...全文
135
2
打赏
收藏
无限级树形菜单,CSS样式有个问题想请教下
功能已经实现了,但是怎样动态的为子节点添加样式,第一个子节点的margin-left:10,子节点的子节点是margin-left:20,子节点的子节点的子节点是margin-left:30,依次推。这个怎么实现呢?我表达的能理解么?我怕我说的不太清楚。
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用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>
原生JS
无限
级
树形
菜单
(兼容各浏览器)
原生JS写的
无限
级
树形
菜单
(包含文件:otree.js,otree.
css
,demo.html,demo1.html,imgs/ ),兼容IE6/7/8/9+、Chrome、Firefox、Opera、Safari等主流浏览器,以及360/搜狗等其他各浏览器。 可动态添加/删除节点,启用/不启用复选框,启用连线或不连线,支持自定义ICON图标,可获取当前选中节点参数及父
级
目录树,可用作
级
联下拉树
菜单
等。 可获取HTML中li列表自动生成树
菜单
(可用作网站多
级
分类目录) 更多功能参见demo.html和demo1.html
js
无限
级
树形
菜单
代码三种风格.rar
一个js树控
菜单
展开的
树形
菜单
,js
无限
级
树形
菜单
代码三种风格,看一下效果图便明白每一款风格的
样式
,觉得都是挺漂亮的,其实这是一款树菜
菜单
插件,名字叫做:"CNL Tree Menu",
无限
级
树形
,具有以下特点:浏览器兼容好,支持:IE5.0 , FF1.06 , Opera8.5 …… HTML,
CSS
,JavaScript代码相互分离(即数据,风格,脚本三者分离),可应用于多种场合,易于维护修改;更换
树形
图标,只需要修改
CSS
文件. 通过W3C校验(XHtml1-Strict,
CSS
1.0).
CNL Tree Menu
无限
级
CSS
树形
菜单
兼容各浏览器
CNL Tree Menu
无限
级
CSS
树形
菜单
兼容各浏览器! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
纯ajax
无限
级
树形
菜单
源码
没有采用第三方ajax组件,纯ajax sqlserver
无限
级
树形
菜单
. 内还包括表结构和一些基础数据 补充:第一次发布时,忘了图片打包进来. 以下载的朋友可以在这里下载图片 http://p.blog.csdn.net/images/p_blog_csdn_net/alphayycn/337547/o_root.gif 依次为:t_L1.gif,t_L2.gif,t_L4.gif,t_M1.gif,t_M2.gif,t_P1.gif,t_P2.gif使用时将图片名前的t_去掉,放在images目录就可以.详细可以看文件中的
css
代码段. 详细介绍地址:http://blog.csdn.net/alphayycn/archive/2007/09/23/1797586.aspx 觉得好用的朋友,别忘了顶.
css
+js
无限
极
树形
菜单
利用
css
和 js构建的一个
无限
极
树形
菜单
利用
css
和 js构建的一个
无限
极
树形
菜单
ASP
28,390
社区成员
357,068
社区内容
发帖
与我相关
我的任务
ASP
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
复制链接
扫一扫
分享
社区描述
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章