ASP.NET Menu Control with XML Data source

ASP.NET Menu Control with XML Data source
With the help of this link of all pages of website can be configured through single xml file.


Known issue: it was not working properly with ie7 on hover event. Also in chrome gives wierd menu type with one level up , expand. Recommended to go for pure css menu. http://vinodkotiya.blogspot.com/2011/09/aspnet-pure-css-menu-with-ie7-hover.html
you may prefer to build drop down menus using Javascript to begin with, however, I always recommend using CSS over javascript, unless you need some animation effects (because CSS renders faster then JS and it does not require the browser to have javascript turned on).
1. Put the menu control as follow




<div id="menu1">
<asp:Menu ID="Menu1" runat="server" MaximumDynamicDisplayLevels="4" StaticDisplayLevels="2"
            DynamicHorizontalOffset="2" DynamicVerticalOffset="2" StaticEnableDefaultPopOutImage="false"
            Orientation="Horizontal"  DisappearAfter="-1">
            
            <DataBindings>
                <asp:MenuItemBinding DataMember="Menu" TextField="text" ValueField="text" NavigateUrlField="url" />
                <asp:MenuItemBinding DataMember="SubMenu" NavigateUrlField="url" TextField="text"
                    ValueField="text" />
            </DataBindings>
           <LevelMenuItemStyles>
              <asp:MenuItemStyle CssClass="level1"/>
              <asp:MenuItemStyle CssClass="level2"/>
             <asp:MenuItemStyle CssClass="level3" />
                <asp:MenuItemStyle CssClass="level4" />
                </LevelMenuItemStyles>
        </asp:Menu>
</div>




2. Here is the vb code to load the menu with xml file




Public Shared Function bindmenu(ByVal menu As Menu) As Boolean
        Dim xds As XmlDataSource = New XmlDataSource
        xds.DataFile = HttpContext.Current.Server.MapPath("menu.xml")
        xds.XPath = "Home/Role[@id='1']"


        menu.DataSource = xds
        menu.DataBind()
        menu.Items(0).Text = ""
        menu.Items(0).Value = ""
        menu.Items(0).Selectable = False


    End Function




3. thee css code in stylesheet




#menu1 {
width: 960px;
height: 40px;
margin: 0 auto;
padding: 5px,2px,2px,2px;
border-top: 1px solid #D0D0D0;
}


.level1
{
    color: White;
    background-color: Black;
    font-variant: small-caps;
    font-size: large;
    font-weight: bold;
}


.level2
{
    color: Blue;
    font-family: Gill Sans MT !important;
    font-size: medium;
   
}


.level3
{
    background-color: #E0FFFF;
    color: #333333;
    font-family: Gill Sans MT !important;
    font-size: medium;
}


.hoverstyle
{
    font-weight: bold;
}


.level4
{
   background-color:#CCFFFF ;
    color: #333333;
    font-size: small;
    font-family: Gill Sans MT !important;
}

4. Write the xml files with link as follows

<?xml version="1.0" encoding="utf-8" ?>

<Home>

    <Role id="1">

        <Menu text="Home" url="Default.aspx"></Menu>

        <Menu text="Material Diversion" url="mdm.aspx">

            

                    <SubMenu text="Material Diversion" url="http://10.0.0.165/prims/default.aspx?loadreport=material_diversion_all"></SubMenu>

                    <SubMenu text="Mat Div : From Proj" url="http://10.0.0.165/prims/default.aspx?loadreport=material_diversion_from"></SubMenu>

                    <SubMenu text="Mat Div : To Proj" url="http://10.0.0.165/prims/default.aspx?loadreport=material_diversion_to"></SubMenu>

            

            

            

        </Menu>

        <Menu text="Civil Fronts"  url="#">

            

                <SubMenu text="Reports" url="http://10.0.0.165/prims/default.aspx?loadreport=fronts"></SubMenu>

        </Menu>

        <Menu text="Comm.Prog.2011-12"  url="#">

        

        <SubMenu text="Reports" url="#"></SubMenu>

        </Menu>

<Menu text="Update" url="#">

 <SubMenu text="Update: Mat Div" url="mdm.aspx"></SubMenu>

<SubMenu text="Civil Fronts" url="fronts.aspx"></SubMenu>

<SubMenu text="Comm. Prog. 2011-12" url="comm_prog.aspx"></SubMenu>

</Menu>

        <Menu text="LogOut" url="login.aspx?logout=1"></Menu>

    </Role>

    <Role id="2">

        <Menu text="Books" url="MenuFromXml.aspx">

            <SubMenu text="Asp.Net" url="MenuFromXml.aspx"></SubMenu>

            <SubMenu text="Ajax" url="MenuFromXml.aspx"></SubMenu>

            <SubMenu text="MS SQL Server 2005" url="MenuFromXml.aspx"></SubMenu>

            <SubMenu text="JavaScript" url="MenuFromXml.aspx"></SubMenu>

        </Menu>

        <Menu text="Contact Us" url="MenuFromXml.aspx"></Menu>

    </Role>

</Home> 

- Vinod Kotiya

www.vinodkotiya.com