JS CSS实现类似即时通信软件好友及黑名单效果的树型菜单

本文实例讲述了JS CSS实现类似即时通信软件好友及黑名单效果的树型菜单。分享给大家供大家参考。具体如下：

今天介绍的这个菜单堪称极品啊，不过里面的有些图标丢失了，路径还留在那，真想使用的朋友自己制作两个折叠菜单的图标按路径传上去就行了，这个菜单是模仿即时通信软件面板的菜单功能，很多朋友还是很喜欢这种功能的，没想到用这么少的射流研究…代码也可实现，值得代签哦。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-CSS-QQ-hy-HMD-风格-菜单-代码/

具体代码如下：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN ' HTML head ttitleqq好友/黑名单的树型菜单/TItle/headdyscripttif(！文件。getelementbyid)文档。getelementbyid=function(){ return null；}函数initializeMenu(menuId，activatorid){ var menu=document。getelementbyid(MenUid)；var执行器=文件。getelementbyid(activatorid)；if(菜单==null ||执行器==null)返回；致动器。父节点。风格。背景图像=' URL()'；致动器。onclick=function(){ var display=menu。风格。显示；这个。父节点。风格。背景图像=(显示=='块')？" URL()' : ' URL()'；菜单。风格。display=(display==' block ')？'无' : '区块返回false} }窗口。onload=function(){ initializeMenu('产品菜单'，'产品执行器')；initializeMenu('newPhonesMenu '，' new phonessacionor ')；initializeMenu('compareMenu '，' compare actor ')；}/script style body { font-family : verdana，helvetica，arial，sans-serif；} #主菜单{底色： # EEE；border: 1px固体# CCCcolor: # 000宽度： 203 px} # MenuList { margin : 0pxpadding : 10px 0px 10px 15px } Li。菜单栏{背景： URL()-否-重复0em 0.3 emfont-size : 12px线高： 1.5 em列表样式：无外部；}.菜单，子菜单{ display:无左边距left: 15pxpadding: 0px }。菜单李.子菜单Li {后台： URL()-无-重复0em 0.3 em列表样式：无外部；} a .致动器{背景色：透明；color : # 000 font-size : 12px；左衬垫左侧： 15px文本装饰：无；} a . activator :悬停{ text-装饰：下划线；}.菜单，阿利。子菜单阿利{背景-颜色：透明；color : # 000 font-size : 12px；左衬垫左侧： 15px文本装饰：无；}.菜单li a:hover，子菜单阿利：悬停{文字装饰：下划线；}span.key { text-decoration:下划线；}/style/head dydiv id=' main menu ' ul id=' Menulist ' Li class='菜单栏' a href=' # ' id=' ProducT actuator ' class=' actuator '图秀地带收藏夹/a ul id=' ProductMenu ' class=' menu '阿利我的好友/a ul id='newPhonesMenu' class='子菜单lia href='# '张三[1000001]a/Li lia李四1000002/a/Li lia张三[1000001]a/Li lia李四[1000002]a/Li/ul/Li阿利陌生人/a ul id='compareMenu' class='子菜单lia href='# '张三[1000001]a/Li lia李四1000002/a/Li lia张三[1000001]a/Li lia李四[1000002]a/Li/ul/Li/ul/Li/ul/div/BOdy/BOdy/HTML希望本文所述对大家的Java脚本语言程序设计有所帮助。