html+css3+jquery多级目录树型结构菜单
工具/原料
adobedreamweaver
方法/步骤
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。<divclass="htmleaf-container"> <divclass="htmleaf-content"> <h2>带日志JS多级目录树结构特效</h2> <buttononClick="expand_all()">扩大所有节点</button> <buttononClick="collapse_all()">所有节点崩溃</button> <buttononClick="clear_log()">清除日志</button> <br/><br/> <divid="div_log"></div> <divid="div_tree"></div> </div></div>
4、书写css代码跷孳岔养。body{font-family:'HelveticaNeue'稆糨孝汶;,Helvetica,'SegoeUI',Arial,freesans;}#div_tree{font:10pxVerdana,sans-serif;display:inline-block;width:300px;}#div_log{width:400px;height:400px;overflow:scroll;padding:10px;vertical-align:top;display:inline-block;border:1pxsolidgray;font:10pxVerdana,sans-serif;line-height:16px;}ul.tree,ul.treeul{list-style-type:none;background:url(vline.png)repeat-y;margin:0;padding:0;padding-left:7px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:default;}li.last{background-image:'url("css/lastnode.png")';background-repeat:no-repeat;}ul.treeul{padding-left:7px;}ul.treeli{margin:0;padding:012px;line-height:22px;background:url(node.png)no-repeat;}ul.treeli.last{background:#fffurl(lastnode.png)no-repeat;}img.exp_col{position:absolute;margin-top:4px;margin-left:-20px;vertical-align:sub;}img.exp_col_empty{position:absolute;margin-top:4px;margin-left:-20px;vertical-align:sub;width:16px;}img.icon_tree{vertical-align:middle;padding-left:3px;margin-top:-3px;}a.node{padding:2px;}span.nodea{padding-left:3px;}span.node{margin-left:-1px;padding-right:3px;padding-top:4px;padding-bottom:4px;}span.node:hover{margin-left:-1px;padding-right:3px;padding-top:4px;padding-bottom:4px;background-color:#DCEDFF;border-radius:2px;}span.node_selected{margin-left:-2px;padding-right:3px;padding-top:4px;padding-bottom:4px;background-color:#CEFFCE;border:1pxsolid#8AE88A;border-radius:2px;}span.node_selecteda{padding-left:3px;}.menu,.sub-menu{margin:0;padding:0;font:10pxVerdana,sans-serif;}.menu,.sub-menu{list-style:none;background:#000;}.sub-menu{background:#F1F1F1;}.menua{text-decoration:none;display:inline-block;padding:8px;}.menuspan{position:absolute;width:100%;height:100%;}.menudiv{position:absolute;right:4px;top:0px;padding:8px;}.menu.menu_img{vertical-align:middle;}.menuimg{text-decoration:none;display:inline-block;vertical-align:sub;padding-left:5px;}.menuli{position:relative;}.menuli:hover{background:aquamarine;cursor:pointer;}.sub-menuli:hover{background:aquamarine;}.menuli:hover>.sub-menu{display:block;}.menu{width:150px;position:absolute;background:#F1F1F1;-webkit-user-select:none;/*Chrome/Safari*/-moz-user-select:none;/*Firefox*/-ms-user-select:none;/*IE10+*/cursor:default;box-shadow:2px2px3px#BDBDBD;}.sub-menu{display:none;position:absolute;min-width:150px;box-shadow:2px2px3px#BDBDBD;}.menu.sub-menu{top:0;left:100%;}
5、书写并添加js蜣贺鱿柢代码。<scriptsrc="lib/Aimara.js"></script><script> 臃扮哀坷window.onload=function(){ varcontex_menu={ 'context1':{ elements:[ { text:'NodeActions', icon:'images/blue_key.png', action:function(node){ }, submenu:{ elements:[ { text:'ToggleNode', icon:'images/leaf.png', action:function(node){ node.toggleNode(); } }, { text:'ExpandNode', icon:'images/leaf.png', action:function(node){ node.expandNode(); } }, { text:'CollapseNode', icon:'images/leaf.png', action:function(node){ node.collapseNode(); } }, { text:'ExpandSubtree', icon:'images/tree.png', action:function(node){ node.expandSubtree(); } }, { text:'CollapseSubtree', icon:'images/tree.png', action:function(node){ node.collapseSubtree(); } }, { text:'DeleteNode', icon:'images/delete.png', action:function(node){ node.removeNode(); } }, ] } }, { text:'ChildActions', icon:'images/blue_key.png', action:function(node){ }, submenu:{ elements:[ { text:'CreateChildNode', icon:'images/add1.png', action:function(node){ node.createChildNode('Created',false,'images/folder.png',null,'context1'); } }, { text:'Create1000ChildNodes', icon:'images/add1.png', action:function(node){ for(vari=0;i<1000;i++) node.createChildNode('Created-'+i,false,'images/folder.png',null,'context1'); } }, { text:'DeleteChildNodes', icon:'images/delete.png', action:function(node){ node.removeChildNodes(); } } ] } } ] } }; tree=createTree('div_tree','white',contex_menu); div_log=document.getElementById('div_log'); tree.nodeBeforeOpenEvent=function(node){ div_log.innerHTML+=node.text+':Beforeexpandevent<br/>'; } tree.nodeAfterOpenEvent=function(node){ div_log.innerHTML+=node.text+':Afterexpandevent<br/>'; } tree.nodeBeforeCloseEvent=function(node){ div_log.innerHTML+=node.text+':Beforecollapseevent<br/>'; } for(vari=1;i<10;i++){ node1=tree.createNode('Level0-Node'+i,false,'images/star.png',null,null,'context1'); for(varj=1;j<5;j++){ node2=node1.createChildNode('Level1-Node'+j,false,'images/blue_key.png',null,'context1'); for(vark=1;k<5;k++){ node3=node2.createChildNode('Level2-Node'+k,false,'images/monitor.png',null,'context1'); } } } tree.drawTree(); tree.createNode('RealTime',false,'images/leaf.png',null,null,'context1'); }; functionexpand_all(){ tree.expandTree(); } functionclear_log(){ document.getElementById('div_log').innerHTML=''; } functioncollapse_all(){ tree.collapseTree(); }</script>
6、代码整体结构。
7、查看效果。
