I have been sucessfully using the CSS Friendly Menu Adapter in MOSS 2007 for a while now. However, I am at the point where I need to tweak the pages a bit to keep page weight down. I have a horizontal menu with drop-down submenus who's items stay selected,
pretty cool stuff. I have only gotten this to work when setting the StaticDisplayLevels="1" and MaximumDynamicDisplayLevels="2" which renders a ul listing of ALL my pages. When I set the MDDL=1 the page weight droped from 250K to 50K. Much more acceptable.
So, I need help figuring out how to set ancestor nodes of the current page to "Selected". Any ideas?
MenuSharepoint"CSS Friendly Control Adapters"AspMenu
Well it looks like the css class is being set for your selected items. What is the problem? Are they not getting the style you expect? If so then its just a problem with your stylesheet. There are a lot of class names in the markup you posted and lots of
nested lists so its probably an issue with a css rule using too manu descendant selector '>'.
Could you post your css here too?
Remember: mark posts that helped you as the answer to aid future readers
Oh, my fault, I posted the desired markup. the "AspNet-Menu-ChildSelected" and "AspNet-Menu-Selected" classes where not rendering on 3rd level current pages.
In the search for an answer for this, I actually created my own solution. I was trying this earlier, but went about it wrong. Using the OnMenuItemDataBound attribute of the asp:Menu control, I was able to run each menuitem through this function;
string a = Request.Url.PathAndQuery.Substring(0,Request.Url.PathAndQuery.LastIndexOf("/")-1);
string b = e.Item.NavigateUrl.Substring(0,e.Item.NavigateUrl.LastIndexOf("/")-1);
if (a == b)
{
e.Item.Selected = true;
}
}
}
This code compares the cURL path - filename with the menuitem URL - filename and if they match, sets the menuitem as "Selected". Works like a champ. I Just hope I don't go any deeper than 3 levels. I'll cross that bridge when I get there.
Rather than checking each item in the menu on every bind, why not have a click event handler that will set the required items as selected when they are clicked on.
Remember: mark posts that helped you as the answer to aid future readers
I am not sure how to go about that using the CSS Friendly Menu Control. The menu is created dynamically from a SharPoint datasource and the items being clicked are "under" the subsections of the menu and aren't really included in the menu.
None
0 Points
6 Posts
CSS Friendly Menu - Need to set ancestor nodes as "Selected"
Apr 25, 2008 11:25 AM|carrerasc|LINK
Hello Everyone,
I have been sucessfully using the CSS Friendly Menu Adapter in MOSS 2007 for a while now. However, I am at the point where I need to tweak the pages a bit to keep page weight down. I have a horizontal menu with drop-down submenus who's items stay selected, pretty cool stuff. I have only gotten this to work when setting the StaticDisplayLevels="1" and MaximumDynamicDisplayLevels="2" which renders a ul listing of ALL my pages. When I set the MDDL=1 the page weight droped from 250K to 50K. Much more acceptable. So, I need help figuring out how to set ancestor nodes of the current page to "Selected". Any ideas?
Menu Sharepoint "CSS Friendly Control Adapters" AspMenu
Contributor
2499 Points
863 Posts
Re: CSS Friendly Menu - Need to set ancestor nodes as "Selected"
Apr 25, 2008 12:03 PM|whatispunk|LINK
Please post the resultant markup of your menu and I'll take a look see
Why UpdatePanels Are Dangerous
Why You Should Not Place Your Whole Site In An UpdatePanel
None
0 Points
6 Posts
Re: CSS Friendly Menu - Need to set ancestor nodes as "Selected"
Apr 25, 2008 01:36 PM|carrerasc|LINK
Here you go. This is the markup for the StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1".
<div class="MainMenu" id="ctl00_PlaceHolderMainMenu_TopNavigationMenu">
<div class="AspNet-Menu-Horizontal">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-Leaf">
<a href="/en_US/Pages/Default.aspx" class="AspNet-Menu-Link">
Home</a>
</li>
<li class="AspNet-Menu-WithChildren">
<a href="/en_US/about/Pages/redirect.aspx" class="AspNet-Menu-Link">
About Alltech</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/about/story/Pages/default.aspx" class="AspNet-Menu-Link">
Our Story</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/about/social/Pages/SocialResponsibility.aspx" class="AspNet-Menu-Link">
Social Responsibility</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/about/production/Pages/default.aspx" class="AspNet-Menu-Link">
Production</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/about/innovation/Pages/Default.aspx" class="AspNet-Menu-Link">
Innovation</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/about/timeline/Pages/default.aspx" class="AspNet-Menu-Link">
Timeline</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
<a href="/en_US/nutrition/Pages/default.aspx" class="AspNet-Menu-Link">
Health & Nutrition</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/nutrition/beef/Pages/Introduction.aspx" class="AspNet-Menu-Link">
Beef & Dairy</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/nutrition/pig/Pages/Introduction.aspx" class="AspNet-Menu-Link">
Pig</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/nutrition/poultry/Pages/Introduction.aspx" class="AspNet-Menu-Link">
Poultry</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/nutrition/aquaculture/Pages/Introduction.aspx" class="AspNet-Menu-Link">
Aquaculture</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/nutrition/equine/Pages/Introduction.aspx" class="AspNet-Menu-Link">
Equine</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/nutrition/pet/Pages/Introduction.aspx" class="AspNet-Menu-Link">
Pet</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/brands/Pages/OurBrands.aspx" class="AspNet-Menu-Link">
Our Brands</a>
</li>
<li class="AspNet-Menu-WithChildren AspNet-Menu-ChildSelected">
<a href="/en_US/media/Pages/default.aspx" class="AspNet-Menu-Link AspNet-Menu-ChildSelected">
News & Media</a>
<ul>
<li class="AspNet-Menu-Leaf AspNet-Menu-Selected">
<a href="/en_US/media/releases/Pages/default.aspx" class="AspNet-Menu-Link AspNet-Menu-Selected">
Press Releases</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/media/video/Pages/default.aspx" class="AspNet-Menu-Link">
Video Gallery</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/media/podcasts/Pages/default.aspx" class="AspNet-Menu-Link">
Podcasts</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/media/photos/Pages/default.aspx" class="AspNet-Menu-Link">
Photo Gallery</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
<a href="/en_US/worldwide/Pages/default.aspx" class="AspNet-Menu-Link" title="Original Alltech Worldwide Section. Copied all subsites to /en_US. ">
Alltech Worldwide</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/worldwide/asiapacific/Pages/default2.aspx" class="AspNet-Menu-Link">
Asia-Pacific</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/worldwide/northamerica/Pages/default.aspx" class="AspNet-Menu-Link">
North America</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/worldwide/latinamerica/Pages/default2.aspx" class="AspNet-Menu-Link">
Latin America</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/worldwide/europe/Pages/default2.aspx" class="AspNet-Menu-Link">
Europe</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/worldwide/middleeastafrica/Pages/default2.aspx" class="AspNet-Menu-Link">
Middle East & Africa</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
<a href="/en_US/events/Pages/default.aspx" class="AspNet-Menu-Link">
Events</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/events/symposium/Pages/Default.aspx" class="AspNet-Menu-Link">
Symposium</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/events/lectures/Pages/Default.aspx" class="AspNet-Menu-Link">
International Lecture Tours</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/events/calendar/Pages/default.aspx" class="AspNet-Menu-Link">
Calendar</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
<a href="/en_US/careers/Pages/default.aspx" class="AspNet-Menu-Link">
Careers</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/careers/jobs/Pages/default.aspx" class="AspNet-Menu-Link">
Careers at Alltech</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/careers/training/Pages/default.aspx" class="AspNet-Menu-Link">
Training & Devlopment</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/careers/diversity/Pages/default.aspx" class="AspNet-Menu-Link">
Diversity</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/en_US/careers/you/Pages/default.aspx" class="AspNet-Menu-Link">
Could this be you?</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
Contributor
2499 Points
863 Posts
Re: CSS Friendly Menu - Need to set ancestor nodes as "Selected"
Apr 25, 2008 03:27 PM|whatispunk|LINK
Well it looks like the css class is being set for your selected items. What is the problem? Are they not getting the style you expect? If so then its just a problem with your stylesheet. There are a lot of class names in the markup you posted and lots of nested lists so its probably an issue with a css rule using too manu descendant selector '>'.
Could you post your css here too?
Why UpdatePanels Are Dangerous
Why You Should Not Place Your Whole Site In An UpdatePanel
None
0 Points
6 Posts
Re: CSS Friendly Menu - Need to set ancestor nodes as "Selected"
Apr 25, 2008 03:48 PM|carrerasc|LINK
Oh, my fault, I posted the desired markup. the "AspNet-Menu-ChildSelected" and "AspNet-Menu-Selected" classes where not rendering on 3rd level current pages.
In the search for an answer for this, I actually created my own solution. I was trying this earlier, but went about it wrong. Using the OnMenuItemDataBound attribute of the asp:Menu control, I was able to run each menuitem through this function;
protected void OnProductsMenuItemDataBound(object sender, MenuEventArgs e)
{
if (e.Item != null)
{
string a = Request.Url.PathAndQuery.Substring(0,Request.Url.PathAndQuery.LastIndexOf("/")-1);
string b = e.Item.NavigateUrl.Substring(0,e.Item.NavigateUrl.LastIndexOf("/")-1);
if (a == b)
{
e.Item.Selected = true;
}
}
}
This code compares the cURL path - filename with the menuitem URL - filename and if they match, sets the menuitem as "Selected". Works like a champ. I Just hope I don't go any deeper than 3 levels. I'll cross that bridge when I get there.
Contributor
2499 Points
863 Posts
Re: CSS Friendly Menu - Need to set ancestor nodes as "Selected"
Apr 25, 2008 04:08 PM|whatispunk|LINK
Rather than checking each item in the menu on every bind, why not have a click event handler that will set the required items as selected when they are clicked on.
Why UpdatePanels Are Dangerous
Why You Should Not Place Your Whole Site In An UpdatePanel
None
0 Points
6 Posts
Re: CSS Friendly Menu - Need to set ancestor nodes as "Selected"
Apr 25, 2008 04:20 PM|carrerasc|LINK
I am not sure how to go about that using the CSS Friendly Menu Control. The menu is created dynamically from a SharPoint datasource and the items being clicked are "under" the subsections of the menu and aren't really included in the menu.
Contributor
2499 Points
863 Posts
Re: CSS Friendly Menu - Need to set ancestor nodes as "Selected"
Apr 25, 2008 04:54 PM|whatispunk|LINK
I guess I'm just confused. When I used the CSS Friendly Control Adapters they handled adding all the CSS class names for you.
Sorry I'm not being much help.
Good luck!
Why UpdatePanels Are Dangerous
Why You Should Not Place Your Whole Site In An UpdatePanel