atljarman
asked on
ASP .Net VB Dynamic Menu ASP Script IF/Then based on URL Comparison??
I have an ASP .Net 2.0 Content Management System I am developing. I've integrated a site map and have a custom menu that I display the site map links using a site master. I've created a test page and test site map to demonstrate the functionality.
What I am trying to do, is to add a condition in the VB script so that if the page is in the "pages" tag of the site map node, then the parent node would be highlighted (i.e., write class='selmenu' in the li tag) and the children would be visible. Otherwise, I would like it so that the children are hidden and the main menu item appears normal. As it stands, the main items do not highlight and are always visible. This would be ok for a small site, but as the site grows and we add nodes on the site map, it can make a very long page.
I've added the "pages" tag to the sitemap so that I could make an asp comparison. For example, I thought if the current page, was found in pages, then write "class=selmenu" and leave it blank otherwise. I am not sure if it is the correct/best approach or not.
What I am trying to do, is to add a condition in the VB script so that if the page is in the "pages" tag of the site map node, then the parent node would be highlighted (i.e., write class='selmenu' in the li tag) and the children would be visible. Otherwise, I would like it so that the children are hidden and the main menu item appears normal. As it stands, the main items do not highlight and are always visible. This would be ok for a small site, but as the site grows and we add nodes on the site map, it can make a very long page.
I've added the "pages" tag to the sitemap so that I could make an asp comparison. For example, I thought if the current page, was found in pages, then write "class=selmenu" and leave it blank otherwise. I am not sure if it is the correct/best approach or not.
<!-- Code for the CustomNavUI.aspx -->
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="CustomNavUI.aspx.vb" Inherits="CustomNavUI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<!-- <link rel='stylesheet' type='text/css' href='styles.css' media='screen,print' title='default' />-->
<style type="text/css">
/********************************************************
* These rules control the Menu *
*******************************************************/
ul#main-nav, ul#main-nav2 {
padding: 0;
overflow:hidden;
margin:0 -17px;
width:242px; /*below is the hack to make the correct width and margin for non ie5 browsers*/
voice-family: '\'}\'';
voice-family: inherit;
width:225px;
margin:0 0px;
}
ul#main-nav li, ul#main-nav2 li
{
margin:0;
padding:0 0 0 -10px;
list-style:none;
font-size: 9pt;
border-bottom: solid 1px #dbeaf1;
width:100%;
}
ul#main-nav li a, ul#main-nav li a:visited, ul#main-nav2 li a, ul#main-nav2 li a:visited {
font-weight:bold;
text-decoration:none;
display:block;
padding:5px 5px 5px 5px;
width:100%;
background: #fce78d;/*bacground color of the main nav items*/
color: #484b60;
}
ul#main-nav li a:hover, ul#main-nav2 li a:hover {
font-size: 9pt;
font-weight:bold;
background: #f6cd1d;
color: #000000;
}
ul#main-nav li a:active, ul#main-nav2 li a:active {
font-size: 9pt;
font-weight:bold;
background: #9b947e;
color: #000000;
}
/* MENU LIST FOR SUBSECTIONS*/
ul#main-nav li ul, ul#main-nav2 li ul {
/*display:none; visibility: hidden;*/
border-top: none;
border-bottom: none;
/*list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 3px;
font-size: 9pt;
}
#main-nav li ul, #main-nav2 li ul {
/*border-top:1px solid #000000;*/
font-size: 9pt;
border-top: none;
border-bottom: none;
}
#main-nav li ul li, #main-nav2 li ul li {
margin-bottom: -2px;
background-image: url(images/site/img_fdagov_orangebullet.gif);
background-repeat: no-repeat;
background-position: 6px 12px;/*10px 8px;*/
padding-left: 10px;
padding-right: 3px;
border-top: none;
border-bottom: none;
}
#main-nav li ul li, #main-nav2 li ul li {
padding-bottom: 2px; list-style-type: none; text-align:left; padding-left:15px;font-size:.9em}
#main-nav li ul li a, #main-nav2 li ul li a,
#main-nav li ul li a:visited, #main-nav2 li ul li a:visited {
font-family: Arial;
font-size: 9pt;
font-weight:bold;
text-decoration: none;
background: none;
color: #484b60;
border-top: none;
border-bottom: none;
}
#main-nav li ul li a:hover, #main-nav2 li ul li a:hover {
font-family: Arial;
font-size: 9pt;
font-weight:bold;
text-decoration: none;
background: none;
color:#730b0d ;
border-top: none;
border-bottom: none;
}
#current, .current {
background-color: #000000; height:200px;}
.selmenu:active,
#main-nav li #selmenu:active {
font-size: 9pt;
font-weight:bold;
display: -moz-block;
display: block;
/*height: 100%;*/
padding: 5px 0px 5px 6px;
background: #9b947e;
/*border-bottom: 1px solid #000000;*/
text-decoration: none;
color: #ffffff;
}
.selmenu:link,
#main-nav li #selmenu:link {
font-size: 9pt;
font-weight:bold;
display: -moz-block;
display: block;
/*width: 173px;*/
/*height: 100%;*/
padding: 5px 0px 5px 6px;
background: #080242; /*#9b947e;*/
/*border-bottom: 1px solid #000000;*/
text-decoration: none;
color: #ffffff;
}
.selmenu:visited,
#main-nav li #selmenu:visited {
font-size: 9pt;
font-weight:bold;
display: -moz-block;
display: block;
/*width: 173px;*/
/*height: 100%;*/
padding: 5px 0px 5px 6px;
background: #080242; /*#9b947e;*/
/*border-bottom: 1px solid #000000;*/
text-decoration: none;
color: #ffffff;
}
.selmenu:hover,
#main-nav li #selmenu:hover
{
font-size: 9pt;
font-weight:bold;
background: #EEEEF0;
color: #000000;
}
.menugen { font-family: Arial; font-size: 8pt; color:#000000; padding:10px;}
/********************************************************
* end of menu css *
*******************************************************/
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>
Custom Navigation UI Elements</h1>
<p>
<asp:Label ID="bulletedList" runat="server"></asp:Label>
<asp:SiteMapDataSource ID="siteMapData" runat="server" ShowStartingNode="False" /></p>
</div>
</form>
</body>
</html>
<!-- Code for the CustomNavUI.aspx.vb -->
Partial Class CustomNavUI
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'Create the bulleted list
bulletedList.Text = String.Format("<ul id='main-nav'><li><a href=""{0}"" title=""{1}"">{1}</a></li>{2}</ul>", _
SiteMap.RootNode.Url, SiteMap.RootNode.Title, DisplaySiteMapLevelAsBulletedList())
End Sub
Private Function DisplaySiteMapLevelAsBulletedList() As String
'Get the SiteMapDataSourceView from the siteMapData SiteMapDataSource
Dim siteMapView As SiteMapDataSourceView = CType(siteMapData.GetView(String.Empty), SiteMapDataSourceView)
'Get the SiteMapNodeCollection from the SiteMapDataSourceView
Dim nodes As SiteMapNodeCollection = CType(siteMapView.Select(DataSourceSelectArguments.Empty), SiteMapNodeCollection)
'Recurse through the SiteMapNodeCollection...
Return GetSiteMapLevelAsBulletedList(nodes)
End Function
Private Function GetSiteMapLevelAsBulletedList(ByVal nodes As SiteMapNodeCollection) As String
Dim output As String = String.Empty
For Each node As SiteMapNode In nodes
output &= String.Format("<li><a href=""{0}"" title=""{1}"">{1}</a>", node.Url, node.Title)
'Add any children levels, if needed (recursively)
If node.HasChildNodes Then
output &= String.Format("<ul>{0}</ul>", GetSiteMapLevelAsBulletedList(node.ChildNodes))
End If
output &= "</li>"
Next
Return output
End Function
End Class
<!-- The sitemap file -->
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="~/Default.aspx" title="Home">
<siteMapNode url="~/Books/Default.aspx" title="Books" pages="Default.aspx,Novels.aspx,History.aspx,Romance.aspx">
<siteMapNode url="~/Books/Novels.aspx" title="Novels" pages="Default.aspx,Novels.aspx,History.aspx,Romance.aspx" />
<siteMapNode url="~/Books/History.aspx" title="History" pages="Default.aspx,Novels.aspx,History.aspx,Romance.aspx"/>
<siteMapNode url="~/Books/Romance.aspx" title="Romance" pages="Default.aspx,Novels.aspx,History.aspx,Romance.aspx" />
</siteMapNode>
<siteMapNode url="~/Electronics/Electronics.aspx" title="Electronics" pages="Electronics.aspx" />
<siteMapNode url="~/DVDs/DVDs.aspx" title="DVDs" pages="DVDs.aspx,New.aspx,Old.aspx">
<siteMapNode url="~/DVDs/New.aspx" title="New" pages="DVDs.aspx,New.aspx,Old.aspx" />
<siteMapNode url="~/DVDs/Old.aspx" title="Old" pages="DVDs.aspx,New.aspx,Old.aspx" />
</siteMapNode>
<siteMapNode url="~/Computers/Computers.aspx" title="Computers" pages="Computers.aspx"/>
</siteMapNode>
</siteMap>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hi, the author is closing the question by mistake, please take the corresponding actions to accept this as solution.
Hi atljarman, I dont know about a site map editor, but I'm sure that a Google search can give you the answer:
http://www.google.com/#q=site+map+editor
http://www.google.com/#q=sitemap+editor+aspnet
http://www.google.com/#q=site+map+editor
http://www.google.com/#q=sitemap+editor+aspnet
Hi atljarman! if this is the solution to your answer, you must accept this as solution, there is no way to give more points as you requested, I appreciate that. thank you.
ASKER
On this solution the root node and parent nodes without children do not highlight when on the active page. Any solution?
ASKER