项目实例：深投控股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;

        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;

        80px;

        text-align: center;

        font-size: 13px;

        line-height: 24px;

    }

    dl.submenu

    {

        display: none;

        position: absolute;

        left: 0px;

        700px;

    }

    dl.submenu dd

    {

        /*clear:both;*/

        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>