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:
Post a Comment