menu.css

网页上经常会用到的树状结构源代码,模拟文件夹方式,采用ajax方式动态加载数据,避免一次性加载带来的数据量过大的效率问题.

@CHARSET "UTF-8";

/*MENU CSS START*/
.menu{position:absolute;width:200px;top:30px;left:10px;visibility:hidden;-moz-user-select:none;z-index:8;}
.menu .s0{position:absolute;top:0px;left:0px;width:190px;background-color:white;border:1px solid #9d9da1;}
.sub_menu .menu .s0{width:110;}
.menu .s1{position:absolute;top:4px;left:4px;width:190px;background-color:black;filter:Alpha(opacity=5);-moz-opacity:0.13;}
.sub_menu .menu .s1{width:110;}
.menu .s2{position:absolute;top:5px;left:5px;width:188px;background-color:black;filter:Alpha(opacity=10);-moz-opacity:0.13;}
.sub_menu .menu .s2{width:108;}
.menu .s3{position:absolute;top:6px;left:6px;width:186px;background-color:black;filter:Alpha(opacity=15);-moz-opacity:0.13;}
.sub_menu .menu .s3{width:106;}
.menu .s4{position:absolute;top:7px;left:7px;width:184px;background-color:black;filter:Alpha(opacity=20);-moz-opacity:0.13;}
.sub_menu .menu .s4{width:104;}
.menu .menu_item{height:18px;margin:2px;padding:2px 0px 2px 2px;width:auto;font-size:9pt;}
html>body .menu .menu_item{height:14px;}
.menu_item_selected{background:#bec1E2;}
.menu_item_disabled{color:gray;}
.menu_icon{float:left;margin-top:4px;margin-right:6px;visibility:hidden;}
.menu_item_checked .menu_icon{visibility:inherit;}
.menu_label{float:left;width:154px;height:16px;cursor:default;}
.sub_menu .menu_label{width:74px;}
.menu_arrow{float:left;margin-top:4px;margin-right:6px;visibility:hidden;}
.menu .s0 div.hr{width:auto;overflow:hidden;height:1px;background-color:#9d9da1;margin:2px 3px 2px 3px;}
/*MENU CSS END*/