项目实例：深投控股--JQueryXmlMenu
ComponentArt:Menu这个菜单的控件，只能竖着下拉，所以我们只能结合JQuery+XML来实现如下的效果
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="JQueryXmlMenu.ascx.cs"
Inherits="CanYou.NewsSys.Web.Controls.JQueryXmlMenu" %>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
ul#menu a
{
color: #FFF;
font-weight: bold;
text-decoration: none;
display: block;
width: 80px;
}
ul#menu a:hover
{
color: #FFF;
background: #666;
}
ul#menu, dl.submenu
{
list-style-type: none;
}
ul#menu li
{
background: #900;
float: left;
margin-left: 10px;
position: relative;
display: inline;
width: 80px;
text-align: center;
font-size: 13px;
line-height: 24px;
}
dl.submenu
{
display: none;
position: absolute;
left: 0px;
width: 700px;
}
dl.submenu dd
{
/*clear:both;*/
width: 80px;
background: #900;
border-top: 1px solid #600;
float: left;
margin: 5px auto;
}
</style>
<script type="text/javascript">
function loadXML(xmlpath) {
var xmlDoc = null;
if (window.ActiveXObject) {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
} else if (document.implementation && document.implementation.createDocument) {
xmlDoc = document.implementation.createDocument("", "", null);
} else {
alert('Your browser cannot handle this script.');
}
xmlDoc.async = false;
xmlDoc.load(xmlpath);
return xmlDoc;
}
function initMenu(xmlpath) {
var oxml = loadXML(xmlpath);
$(oxml).find("menus > menu").each(function() {
var temp_str;
temp_str = "<li><a href=" + $(this).attr("link") + ">" + $(this).attr("name") + "</a>"
if ($(this).find("submenu").size() > 0) {
if ($(this).find("submenu:first").attr("left")) {
temp_str += "<dl class=submenu style='left:" + $(this).find("submenu:first").attr("left") + ";'>";
}
else {
temp_str += "<dl class=submenu>";
}
$(this).find("submenu").each(function() {
temp_str += "<dd><a href=" + $(this).attr("link") + ">" + $(this).attr("name") + "</a></dd>"
});
temp_str += "</dl>"
}
temp_str += "</li>";
$(temp_str).appendTo("#menu");
});
$("#menu li").each(function() {
$(this).hover(function() {
$(this).children("dl.submenu").show();
},
function() {
$(this).children("dl.submenu").hide();
});
});
}
$(function() {
debugger;
initMenu("Menu/menu.xml");
});
</script>
<div id="nav_header" class="TopGroupDark">
<ul id="menu">
</ul>
</div>
<script type="text/javascript" src="Menu/jquery-1.2.6.js"></script>
<script type="text/javascript"> initMenu("Menu/menu.xml");</script>
menu.xml
<?xmlversion="1.0"encoding="UTF-8"?>
<menus>
<menuname="首页"link="default.aspx">
</menu>
<menuname="关于控股"link="catalog.aspx?key=newsList|val=127">
<submenuname="深投荣誉"link="catalog.aspx?key=newsList|val=127"left="-90px" />
<submenuname="深投记事"link="catalog.aspx?key=newsList|val=127" />
<submenuname="深投司歌"link="catalog.aspx?key=newsList|val=127" />
<submenuname="联系我们"link="catalog.aspx?key=newsList|val=127" />
<submenuname="企业电邮"link="http://mail.sihc.com.cn" />
</menu>
<menuname="公司简介"link="catalog.aspx?key=newsList|val=127">
<submenulink="#"name="个人系列"left="-180px" />
<submenulink="#"name="家庭系列" />
<submenulink="#"name="公务系列" />
<submenulink="#"name="专题系列" />
<submenulink="#"name="电子系列" />
</menu>
<menuname="公司领导"link="#">
<submenulink="#"name="服务流程"left="-180px" />
<submenulink="#"name="私人选购" />
<submenulink="#"name="公务选购" />
<submenulink="#"name="预购登记" />
<submenulink="#"name="服务保证" />
<submenulink="#"name="收费标准" />
</menu>
<menuname="公司机构"link="#">
<submenulink="#"name="方案策划"left="-270px" />
<submenulink="#"name="图片配文" />
<submenulink="#"name="图文录入" />
<submenulink="#"name="上门拍摄" />
<submenulink="#"name="视觉设计" />
<submenulink="#"name="相册制作" />
<submenulink="#"name="全套服务" />
</menu>
<menuname="员工论坛"link="#">
<submenulink="#"name="公司要闻"left="-120px" />
<submenulink="#"name="行业动态" />
<submenulink="#"name="视频宣传" />
<submenulink="#"name="商务合作" />
</menu>
<menuname="政策法规"link="#">
<submenulink="#"name="答疑解惑"left="-90px" />
<submenulink="#"name="网友留言" />
<submenulink="#"name="会员中心" />
</menu>
</menus>
