|
The SiteMap.SiteMapResolve event get trigger when the
CurrentNode property is accessed. It will call the ReplaceNodeText method
recursively and replace the HTML underline tag. See listing 8.
Listing 8
SiteMapNode SiteMap_SiteMapResolve(object sender,
SiteMapResolveEventArgs e)
{
SiteMapNode currentNode =
SiteMap.CurrentNode.Clone(true);
SiteMapNode tempNode = currentNode;
tempNode = ReplaceNodeText(tempNode);
return currentNode;
}
//remove <u></u> tag recursively
internal SiteMapNode ReplaceNodeText(SiteMapNode
smn)
{
//current node
if (smn != null &&
smn.Title.Contains("<u>"))
{
smn.Title = smn.Title.Replace("<u>",
"").Replace("</u>", "");
}
//parent node
if (smn.ParentNode != null)
{
if
(smn.ParentNode.Title.Contains("<u>"))
{
SiteMapNode gpn = smn.ParentNode;
smn.ParentNode.Title =
smn.ParentNode.Title.Replace("<u>", "").Replace("</u>", "");
smn = ReplaceNodeText(gpn);
}
}
return smn;
}
Using the Code:
Since the menu is in the master page, right click the
website project, add new item, Web Form and check the Select Master Page
checkbox.
Points of Interest
The hover menu appears to not working on mobile devices.
To remedy this problem, I include a TreeView control and set its visible
property to false. This control expands its entire node by default. That will
take care of the mentioned problem. In the code behind, hide the Menu control
and show the TreeView control if requesting browser is a mobile device. See
listing 9.
Listing 9
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Browser.IsMobileDevice)
{
NavigationMenu.Visible = false;
NavigationTreeView.Visible = true;
}
}
When I tested the menu on IE 8, the hover menu did not
render correctly. To overcome this problem, I set the DynamicMenuStyle z-index
to 200, see style.css. The submenu is also not working with Google Chrome. After
some research, I found the solution for it. See listing 10.
Listing 10
protected void Page_Load(object sender, EventArgs e)
{
if (Request.UserAgent.IndexOf("AppleWebKit") >
0)
{
Request.Browser.Adapters.Clear();
NavigationMenu.DynamicMenuStyle.Width =
Unit.Pixel(120);
}
}
New Update
I have received several complaints from the reader
concerning the menu control not displaying correctly on Safari and Google Chrome
browsers. Somehow the menu items are stacked on each other and the submenu
widths are gapped apart. After doing some research, I found the answer here,
see listing 11. To fix the submenu width, remove the display:block from the dynamicMenuItemStyle in the css file.
Listing 11
protected override void AddedControl(Control control, int
index)
{
if
(Request.ServerVariables["http_user_agent"].IndexOf("Safari",
StringComparison.CurrentCultureIgnoreCase) != -1)
this.Page.ClientTarget = "uplevel";
base.AddedControl(control, index);
}
I also rewrite the logic to detect mobiles browser with
the code from Vincent Van Zyl. See listing 12.
Listing 12
public static readonly string[] mobiles =
new[]
{
"midp", "j2me", "avant", "docomo",
"novarra", "palmos", "palmsource",
"240x320", "opwv", "chtml",
"pda", "windows ce", "mmp/",
"blackberry", "mib/", "symbian",
"wireless", "nokia", "hand",
"mobi",
"phone", "cdm", "up.b", "audio",
"SIE-", "SEC-", "samsung", "HTC",
"mot-", "mitsu", "sagem", "sony"
, "alcatel", "lg", "eric", "vx",
"NEC", "philips", "mmm", "xx",
"panasonic", "sharp", "wap", "sch",
"rover", "pocket", "benq", "java",
"pt", "pg", "vox", "amoi",
"bird", "compal", "kg", "voda",
"sany", "kdd", "dbt", "sendo",
"sgh", "gradi", "jb", "dddi",
"moto", "iphone"
};
public static bool isMobileBrowser()
{
//GETS THE CURRENT USER CONTEXT
HttpContext context = HttpContext.Current;
//FIRST TRY BUILT IN ASP.NT CHECK
if (context.Request.Browser.IsMobileDevice)
{
return true;
}
//THEN TRY CHECKING FOR THE HTTP_X_WAP_PROFILE
HEADER
if
(context.Request.ServerVariables["HTTP_X_WAP_PROFILE"] != null)
{
return true;
}
//THEN TRY CHECKING THAT HTTP_ACCEPT EXISTS AND
CONTAINS WAP
if (context.Request.ServerVariables["HTTP_ACCEPT"]
!= null &&
context.Request.ServerVariables["HTTP_ACCEPT"].ToLower().Contains("wap"))
{
return true;
}
//AND FINALLY CHECK THE HTTP_USER_AGENT
//HEADER VARIABLE FOR ANY ONE OF THE FOLLOWING
if
(context.Request.ServerVariables["HTTP_USER_AGENT"] != null)
{
for (int i = 0; i < mobiles.Length; i++)
{
if
(context.Request.ServerVariables["HTTP_USER_AGENT"].
ToLower().Contains(mobiles[i].ToLower()))
{
return true;
}
}
}
return false;
}
Add the code shown below in the Page_Load event
Listing 13
if (isMobileBrowser())
{
NavigationMenu.Visible = false;
NavigationTreeView.Visible = true;
}
Conclusion
If you find any bugs or disagree with the contents,
please drop me a line and I'll work with you to correct it.
Tested on IE 6.0/7.0/8.0, Google Chrome, Firefox, and
Safari
|