Thread: Menu Navigation Sub Pages

Hello,

I am sorry to always ask the dumb questions, but here we go again::

I have figured out how to alter the page.menu.xml.config in order to add subpages (children) links under the Customer Service link. I have also figured out how to add main links above this similar to "Soccer Stop Home" or "History", etc. However what I want is to add is a subpage (child) of the "Soccer Stop Home" with the name of "About Us". You can see in the code below I created the "About Us" link but it is not a child of "Soccer Stop Home", but its own parent. How do I create a child to this?

In other words for the "Soccer Stop Home" link I want a child page which appears as a second level named "About Us".

<xsl:template match="/">
<siteMap>
<siteMapNode title="Soccer Stop Home" url="~/default.aspx">
<siteMapNode title="About Us" url="~/t-about.aspx" />
<siteMapNode title="Team Uniforms" url="~/t-teamuniforms.aspx" />
<siteMapNode title="History" url="~/t-history.aspx" />
<!-- These are static links -->
<siteMapNode title="(!menu.CustomerService!)" url="" >
<siteMapNode title="(!menu.YourAccount!)" url="~/account.aspx" />
<siteMapNode title="(!menu.PolicyReturns!)" url="~/t-returns.aspx" />
<siteMapNode title="(!menu.Shipping!)" url="~/t-shipping.aspx" />
<siteMapNode title="(!menu.Contact!)" url="~/t-contact.aspx"

imageUrl="/images/background/background.gif" />
<siteMapNode title="(!menu.PolicyPrivacy!)" url="~/t-privacy.aspx" />
<siteMapNode title="Make a Payment" url="~/p-4-make-a-payment.aspx" />
</siteMapNode>
<!-- Titles are predefined entities, the contents are not explicitly set here but runtime they are dynamically populated per entity-->
<siteMapNode title="Shopping Categories" type="category" />
</siteMapNode>
</siteMap>
</xsl:template>


Thanks
James

You have to make sure that children are enclosed in their parent. See this code:

Code:

<xsl:template match="/">
	<siteMap>
		<siteMapNode title="Soccer Stop Home" url="~/default.aspx">
			<siteMapNode title="About Us" url="~/t-about.aspx" />
			<siteMapNode title="Team Uniforms" url="~/t-teamuniforms.aspx" />
			<siteMapNode title="History" url="~/t-history.aspx" />
		</siteMapNode>
		<!-- These are static links -->
		<siteMapNode title="(!menu.CustomerService!)" url="">
			<siteMapNode title="(!menu.YourAccount!)" url="~/account.aspx" />
			<siteMapNode title="(!menu.PolicyReturns!)" url="~/t-returns.aspx" />
			<siteMapNode title="(!menu.Shipping!)" url="~/t-shipping.aspx" />
			<siteMapNode title="(!menu.Contact!)" url="~/t-contact.aspx" imageUrl="/images/background/background.gif" />
			<siteMapNode title="(!menu.PolicyPrivacy!)" url="~/t-privacy.aspx" />
			<siteMapNode title="Make a Payment" url="~/p-4-make-a-payment.aspx" />
		</siteMapNode>
		<!-- Titles are predefined entities, the contents are not explicitly set here but runtime they are dynamically populated per entity-->
		<siteMapNode title="Shopping Categories" type="category" />
	</siteMap>
</xsl:template>

Great, that works. How do I make the children menus only show up when you scroll over the parent. Similar to how the categories work with subcategories that only display after you scroll over the parent category. A slide type menu so when a user scrolls over "About Us', then a menu will appear with its children like "history" and then below that "links", etc.

Thanks for your help.
James

You have to set how many levels you want displayed in the properties of the menu in the template.master file.

Ok. thanks for the reply.

However, what I want is not a parent link that when you click provides you then a list of the child links. I want when you scroll over the parent link the child links appear beside the parent link like a slide menu. How can I do this?

Thanks
James

Do you mean like what you can see at http://www.wynparts.com/?

Yes, exactly. Right now my categories list is just like that, but my other links are not.

How do I do that?

You mean the custom links you have aren't nested but are instead all on the main or top level?

I suppose.

You can see them here..

http://dev.soccerstop.com

The links under home should be child links that appear like the example you gave. If you look at the categories list they work great. I have the code in the page.menu.xml.config like this::

<package displayname="Menu" version="2.1" debug="false" includeentityhelper="false">
<PackageTransform>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:aspdnsf="urn:aspdnsf" xmlns:g="http://base.google.com/ns/1.0" exclude-result-prefixes="aspdnsf">
<xslutput method="xml" omit-xml-declaration="no" encoding="utf-8" indent="no" />

<xsl:template match="/">
<siteMap>
<siteMapNode title="Soccer Stop Home" url="~/default.aspx">
<siteMapNode title="About Us" url="~/t-about.aspx" />
<siteMapNode title="History and Information" url="~/t-history.aspx" />
<siteMapNode title="Become a Licensee" url="~/t-licensee.aspx" />
<siteMapNode title="Locations" url="~/t-locations.aspx" />
<!-- These are static links -->
<siteMapNode title="(!menu.CustomerService!)" url="" >
<siteMapNode title="(!menu.YourAccount!)" url="~/account.aspx" />
<siteMapNode title="(!menu.PolicyReturns!)" url="~/t-returns.aspx" />
<siteMapNode title="(!menu.Shipping!)" url="~/t-shipping.aspx" />
<siteMapNode title="(!menu.Contact!)" url="~/t-contact.aspx" imageUrl="/images/background/background.gif" />
<siteMapNode title="(!menu.PolicyPrivacy!)" url="~/t-privacy.aspx" />
<siteMapNode title="Make a Payment" url="~/p-4-make-a-payment.aspx" />
</siteMapNode>
<!-- Titles are predefined entities, the contents are not explicitly set here but runtime they are dynamically populated per entity-->
<siteMapNode title="Shopping Categories" type="category" />
</siteMapNode>
</siteMap>
</xsl:template>

</xsl:stylesheet>

</PackageTransform>
</package>

Please post the code for the menu in your template.master file.

Thank you for help with this!

Here is what I found in the master

<asp:Menu ID="aspnetMenu" runat="server" Orientation="Vertical"
StaticEnableDefaultPopOutImage="False" StaticDisplayLevels="3" MaximumDynamicDisplayLevels="<%$ Tokens:AppConfigUSInt, MaxMenuLevel %>">
<StaticSelectedStyle CssClass="aspnetMenu_StaticSelectedStyle" />
<LevelMenuItemStyles> <asp:MenuItemStyle CssClass="aspnetMenu_Level1" Font-Underline="False" />
<asp:MenuItemStyle CssClass="aspnetMenu_Level2" Font-Underline="False" />
</LevelMenuItemStyles> <StaticMenuItemStyle CssClass="aspnetMenu_StaticMenuItemStyle" />
<DynamicSelectedStyle CssClass="aspnetMenu_DynamicSelectedStyle" />
<DynamicMenuItemStyle CssClass="aspnetMenu_DynamicMenuItemStyle" />
<DynamicMenuStyle CssClass="aspnetMenu_DynamicMenuStyle" />
<%--
These 2 styles below can't be added declaratively, it will be added later on the script
But needs to follow the naming convention {MenuId}_WhatEverStyle
--%>
<%--<DynamicHoverStyle CssClass="aspnetMenu_DynamicHoverStyle" />--%>
<%--<StaticHoverStyle CssClass="aspnetMenu_StaticHoverStyle" />--%>
</asp:Menu>

Do I need to change this code?

Thanks for any help.
James

Try changing your StaticDisplayLevels to 2 instead of 3.

Thank you so much for your help. That was the ticket!

Now I have another menu navigation challenge.

With your fix I have the menus now optimized.

http://www.soccerstop.com

However I want my "categories" menu to show the parent category like it does "Shopping Categories" but I want the first set of subcategories to be displayed below it such as "Accessories, Bags, Balls, etc) and when you scroll over those subcategories you will see any children of those.

Is this something you can help to understand how to do?

James

It seems to be that your categories menu is working that way. I see under the header of categories the list of categories and when I mouseover a category I see the subcategories. Perhaps I don't understand what you are asking.

Hi,

I want for the first set of categories (such as Accessories, Bags, Balls, etc) to be listed without having to scroll over the "shopping categories". I want them to be displayed like "shopping categories" is now.

It would be great if it looked like this:::

Shopping Categories
Accessories
Bags
Balls

and when you scrolled over Accessories it would then display any children of that in a menu like it does now.

I gave you the wrong URL previously. Here is where I am developing this::

http://dev.soccerstop.com

Thanks
James

What I would suggest is setting the StaticDisplayLevels to a higher number such that the categories are displayed and then I would pad the other non-category menus, the static menus you've defined with empty containers. You can then use the flattening code that is found at:

http://forums.aspdotnetstorefront.co...48&postcount=8

Hi,

I can't thank you enough for your help. Let me know how I can return the favor.

I looked at the code you gave but I don't understand where to put the code. It was mentioned:::

Put a call to this right after the call to SetupMenu in the OnPreRender Sub.

I don't know where this is. "OnPreRender Sub"?

Thanks for your help.
James

You'll find that in

Code:

App_Code/MasterPageBase.vb

Sorry to ask so many dumb questions, but I don't understand how to put this code in to flatten the menu. I looked and found the location of the setupmenu as you described. What is the syntax and where exactly do I put this code?

Here is the code in that file currently::::

protected override void OnPreRender(EventArgs e)
{
SetupMenu();

if (AppLogic.AppConfigBool("Layouts.Enabled"))
{
bool HasMappedLayout = false;

bool IsTopic = (Page as SkinBase).IsTopicPage;
bool IsEntity = (Page as SkinBase).IsEntityPage;
bool IsProduct = (Page as SkinBase).IsProductPage;

int PageID = (Page as SkinBase).PageID;

LayoutMap lm = new LayoutMap();

if (IsEntity)
{
String EntityType = (Page as SkinBase).EntityType;

lm = new LayoutMap(EntityType, PageID);

if (lm.LayoutID > 0)
{
HasMappedLayout = true;
(Page as SkinBase).ThisLayout = new LayoutData(lm.LayoutID);
}
}
else if (IsTopic)
{
lm = new LayoutMap("topic", PageID);


}
else if (IsProduct)
{
lm = new LayoutMap("product", PageID);
}
else
{
String pName = CommonLogic.GetThisPageName(false);

lm = new LayoutMap(pName, PageID);
}

if (lm.LayoutID > 0)
{
HasMappedLayout = true;
(Page as SkinBase).ThisLayout = new LayoutData(lm.LayoutID);
}

if (HasMappedLayout)
{
LayoutData ThisLayout = (Page as SkinBase).ThisLayout;

if ((Page as SkinBase).ThisLayout != null)
{
bool exists = CommonLogic.FileExists(ThisLayout.LayoutFile);

if (!exists)
{
exists = ThisLayout.CreateLayoutControl();
}

if (exists)
{
Control ctrl = LoadControl("~/layouts/" + ThisLayout.LayoutID.ToString() + "/" + ThisLayout.Name + "_" + ThisLayout.Version.ToString() + ".ascx");

ContentPlaceHolder phContent = (ContentPlaceHolder)this.FindControl("PageContent" );
phContent.Controls.Clear();

phContent.Controls.Add(ctrl);
}
}

}
}

Next time please put your code in code blocks.

You should insert the call to the menu flattening code right after the call to SetupMenu. That routine adds to the menu all the categories and other automatically generated content. Then you want to go back and flatten the menu so that you can get those categories to be at the root level.

If you have continued trouble please send me your page.menu.xml.config file (or include it here) and I'll make some suggestions based on your actual files.

Hi,

Thanks for your help again.

I am looking at my masterpagebase and it is .cs and not .vb. This is probably because I do not have the source file. I found the setup (per the code) I inserted before but I do not know the syntax to use to insert the flattening code. Maybe it will not work in the .cs file anyway?

I have flattened the menu as much as possible, but it seems sort of silly the way it looks now on the website where I am almost repeating the same page names. You can see here:

http://www.soccerstop.com

I did go live with this last night because I ran out of time for this project. I really would like to get this menu working a little better.

Please let me know your thoughts.
Thanks
James

You'll need to use a VB to C# conversion tool if you are working in C#.

Code:

Protected Overrides Sub OnPreRender(ByVal e As EventArgs)
	SetupMenu()
	FlattenAutoMenu()

	If AppLogic.AppConfigBool("Layouts.Enabled") Then

Code:

Private Sub FlattenAutoMenu()
	If aspnetMenu IsNot Nothing Then
		Do While aspnetMenu.Items(0).ChildItems.Count > 0
			aspnetMenu.Items.Add(aspnetMenu.Items(0).ChildItems(0))
		Loop
		aspnetMenu.Items.RemoveAt(0)
	End If
End Sub

Your not trying to flatten the page.menu.xml.config file, actually you want to pad that file. What you want to do is pad the page.menu.xml.config file such that the static entries are one level deeper than the autogenerated categories menu. Then run the FlattenAutoMenu routine as many times as you need to get the categories to show at the top level.

If you are going for a look simular to what you have now, you probably won't need to flatten the menu at all, or maybe just once, but instead set the StaticDisplayLevels to one higher and then put a blank holder in the menu such that the menu item that appears on the page as a top level item (at the same level as categories root) is actually blank, and the only thing you see are the static menus at the same level as the categories. I personally thing that would look foolish.

What might help is if you include your page.menu.xml.config file and a typed out description of what you want it to look like. I'll then give pointed suggestions.

e.g.

Code:

item 1
-sub 1 (collapsed)
item 2
-sub 1 (collapsed)
-sub 2 (collapsed)
categories
-cat 1 (uncollapsed)
--sub cat 1 (collapsed)
--sub cat 2 (collapsed)
-cat 2 (uncollapsed)

I want to add a login/logout link that changes appropriately to the horizontal nav bar.

I found this code in the template file:

Code:

<a href='<asp:Literal ID="Literal1" runat="server" Text="<%$ Tokens:SignInOut_Link %>" />'><asp:Literal
                        ID="ltrSignInOutText" runat="server" Text='<%$ Tokens:SignInOut_Text %>' /></a>

How would I modify it for a link in line with my other static links in the page.menu.xml?

Code:

<siteMapNode title="About Us" url="~/t-About.aspx" />
<siteMapNode title="Sell to Us" url="~/t-Sell_to_Us.aspx" />
<siteMapNode title="Contact Us" url="~/t-Contact.aspx" />