Monday, May 13, 2013

Sharepoint mega menu

Sample URL: http://www.ramto.com/blog/post/Mega-Dropdown-Menu-with-ASPNET-and-jQuery-in-C.aspx.

UI:
Add CSS and JS
<link href="/_layouts/Muthuvel2SP/CSS/jkmegamenu.css" type="text/css" rel="stylesheet" />
<script src="/_layouts/Muthuvel2SP/JS/jkmegamenu.js" type="text/javascript"></script>

Add 2 literal Control

<asp:Literal ID="anchorLiteral" runat="server"></asp:Literal>
<asp:Literal ID="menuLiteral" runat="server"></asp:Literal>


Add OnDataBound="Menu1_DataBound" event in the menu control

Master Page Code behind File:

protected void Menu1_DataBound(object sender, EventArgs e)
        {
            //hide the asp menu
            demoGlobalNavAspMenu.Visible = false;

            //holds html anchors
            anchorLiteral.Text = "";

            //holds html mega dropdown menu
            menuLiteral.Text = "";

            //register megamenu script and create anchor foreach top level

            StringBuilder mScript = new StringBuilder();
            StringBuilder anchorText = new StringBuilder();
            StringBuilder menuText = new StringBuilder();

            mScript.AppendLine(@"<script type='text/javascript'>");
            int cntLvl1 = 0;

            foreach (MenuItem lvl1 in demoGlobalNavAspMenu.Items)
            {
                cntLvl1++;
                string anchorId = "megaanchor" + cntLvl1.ToString();
                string megamenuId = "megamenu" + cntLvl1.ToString();

                //anchor for each top level menu
                anchorText.AppendLine("<a href='" + lvl1.NavigateUrl + "' id='" +
                    anchorId + "' class='topMenuCMSListMenuLinkHighlighted'>" +
                    lvl1.Text + "</a>");

                //building mega menu div if menuitem has children
                if (lvl1.ChildItems.Count > 0)
                {
                    int cntLvl2 = 0;
                    //script for each top level menu
                    mScript.Append(@"jkmegamenu.definemenu('" + anchorId + "', '" +
                        megamenuId + "', 'mouseover');");

                    menuText.AppendLine("<div id='" + megamenuId + "' class=megamenu>");

                    //building columns within the mega menu
                    foreach (MenuItem lvl2 in lvl1.ChildItems)
                    {
                        cntLvl2++;
                        menuText.AppendLine("<div class='column'>");
                        menuText.AppendLine("<h3><a href='" + lvl2.NavigateUrl + "'>" +
                            lvl2.Text + "</a></h3>");

                        //create ul list if any children
                        if (lvl2.ChildItems.Count > 0)
                        {
                            menuText.AppendLine("<ul>");
                            foreach (MenuItem lvl3 in lvl2.ChildItems)
                            {
                                menuText.AppendLine("<li><a href='" + lvl3.NavigateUrl + "'>" +
                                    lvl3.Text + "</a></li>");
                            }
                            menuText.AppendLine("</ul>");
                        }

                        menuText.AppendLine("</div>");

                        //break after 2 columns
                        //if (cntLvl2 >= 2)
                        //{
                        //    menuText.AppendLine("<br style='clear: left' />");
                        //    cntLvl2 = 0;
                        //}
                    }
                    menuText.AppendLine("</div>");
                }
            }

            anchorText.AppendLine("</ul>");

            anchorLiteral.Text = anchorText.ToString();
            menuLiteral.Text = menuText.ToString();
            mScript.AppendLine(@"</script>");
            Guid gid = System.Guid.NewGuid();

            Page.ClientScript.RegisterStartupScript(this.GetType(), gid.ToString(), mScript.ToString());
        }

No comments: