菜单的效果见我的相册里面的作品截屏。
menutest.htm 实际应用测试页面
menudata.xml 菜单配置页面
menu.css 菜单样式表
webmenu.htc 封装后的htc菜单组件
原代码:
====================================
menutest.htm
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body topmargin="0" leftmargin="0" oncontextmenu="menu1.showmenu(window,menu1.datasource.documentelement.selectsinglenode('//menuitem'),window.document.body,event.x,event.y)">
<div id="menubardiv"></div>
<webmenu datasource="xmldata" class="webmenu" id="menu1" width="100" effect="2" menutype="1" container="menubardiv"></webmenu>
<webmenu datasource="xmldata" class="webmenu" id="menu2" width="100" effect="3" menutype="0" container="menubardiv"></webmenu>
<textarea rows="17" id="code" cols="73" style="display:none"></textarea><xml id="xmldata" src="menudata.xml"></xml>
</body>
</html>
=========================================
menudata.xml
<?xml version="1.0" encoding="gb2312"?>
<root>
<menuitem hassub="1" subwidth="160" >
<menuitem func="" text="一级菜单项1" img="save.gif"/>
<menuitem func="" text="一级菜单项2" img="addnew.gif" hassub="1" headcolumn="2" subwidth="200">
<menuitem func="" ischeckitem="1" checked="1" text="二级级菜单项3" img=""/>
<menuitem func="" ischeckitem="1" checked="1" text="二级级菜单项3" img=""/>
<menuitem func="" ischeckitem="1" text="二级级菜单项3" img="addnew.gif"/>
<menuitem func="" ischeckitem="1" text="二级级菜单项3" img=""/>
<menuitem func="" ischeckitem="1" text="二级级菜单项3" img=""/>
<menuitem func="" ischeckitem="1" text="二级级菜单项3" img=""/>
<menuitem func="" ischeckitem="1" text="二级级菜单项3" img=""/>
<menuitem func="" ischeckitem="1" text="二级级菜单项3" img=""/>
<menuitem func="" ischeckitem="1" checked="1" text="二级级菜单项3" img="save.gif"/>
<menuitem func="" ischeckitem="1" checked="1" text="二级级菜单项3" img=""/>
<menuitem func="" ischeckitem="1" text="二级级菜单项3" img=""/>
<menuitem func="" ischeckitem="1" text="二级级菜单项3" img=""/>
<menuitem func="" ischeckitem="1" text="二级级菜单项3" img=""/>
<menuitem func="" ischeckitem="1" text="二级级菜单项3" img=""/>
<menuitem func="" ischeckitem="1" text="二级级菜单项3" img=""/>
<menuitem func="" ischeckitem="1" text="二级级菜单项3" img=""/>
<menuitem func="" ischeckitem="1" text="二级级菜单项3" img=""/>
</menuitem>
<menuitem func="" text="一级菜单项3" img="refresh.gif" hasline="1"/>
<menuitem func="" text="一级菜单项4" img=""/>
<menuitem func="" text="一级菜单项5" img="" hassub="1" subwidth="160">
<menuitem func="" text="二级级菜单项3" img="edit.gif" hasline="1"/>
<menuitem func="" text="二级级菜单项3" img=""/>
<menuitem func="" text="二级级菜单项3" img="" hassub="1" subwidth="160">
<menuitem func="" text="三级级菜单项4" img="sendemail.gif" hasline="1"/>
<menuitem func="" text="三级级菜单项4" img=""/>
<menuitem func="" text="三级级菜单项4" img=""/>
</menuitem>
</menuitem>
<menuitem func="" text="一级菜单项6" img="search.gif"/>
</menuitem>
</root>
===========================================
menu.css
.webmenu{
behavior: url("webmenu.htc")
}
.menupanel
{
border: 1px solid #002d96;