Modify Menu adapter to show selected <ul> element

Question

User495249963 posted

Hey, I need some help modifying the menu adapter code to give child <ul> elements a class value indicating that the parent is selected. It should render like this:

 

< ul class="AspNet-Menu">
	< li class="AspNet-Menu-WithChildren  AspNet-Menu-ChildSelected">
		< a href="/rockit/admin/Default.aspx" class="AspNet-Menu-Link  AspNet-Menu-ChildSelected">
		< span>Mypage< /span>< /a>
			< ul class="AspNet-Sub AspNet-Sub-Selected">
				< li class="AspNet-Menu-Leaf  AspNet-Menu-Selected">
					< a href="/rockit/admin/Default2.aspx" class="AspNet-Menu-Link  AspNet-Menu-Selected">
					< span>Test< /span>< /a>
				< /li>
				< li class="AspNet-Menu-Leaf">
					< a href="/rockit/Default3.aspx" class="AspNet-Menu-Link">
					< span>Test2< /span>< /a>
				< /li>
			< /ul>
	< /li>
< /ul>

 I have already changed the code to render the span elements inside links, and giving child <ul> elements a class with value "AspNet-Sub". Only thing left that I can't figure out how to do is append a "AspNet-Sub-Selected" value to the child <ul> element containing a selected link. Hope this makes sense :)

Answer 1

User495249963 posted

I want my menu to behave something like this: http://www.cssplay.co.uk/menus/simple_dropline.html

And the only way I can do that (I think) is getting the menu to show selected <ul> element 

Answer 2

User495249963 posted

After a few hours of looking at the code I managed to get it to work.

Answer 3

User495249963 posted

I'm posting my solution in case anyone else need help with something similar. It's not 100% perfect but it works :)

You can take a look at the result here: http://www.hallstensen.com/menuadapter/

This is only gonna work with a menu of maximum 2 tiers.

 Here's how to set it up:

1. ASPX file: 

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"
              Orientation="Horizontal"
              CssSelectorClass="nav" 
              StaticDisplayLevels="2">
    </asp:Menu>
    
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />

  2. Web.sitemap:

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="" title="Menu" description="">
    <siteMapNode url="~/Default.aspx" title="Menu item 1"  description="">
      <siteMapNode url="~/pages/1/1-1.aspx" title="Test 1-1"  description="" />
      <siteMapNode url="~/pages/1/1-2.aspx" title="Test 1-2"  description="" />
      <siteMapNode url="~/pages/1/1-3.aspx" title="Test 1-3"  description="" />
    </siteMapNode>
    <siteMapNode url="~/Default2.aspx" title="Menu item 2"  description="">
      <siteMapNode url="~/pages/2/2-1.aspx" title="Test 2-1"  description="" />
      <siteMapNode url="~/pages/2/2-2.aspx" title="Test 2-2"  description="" />
    </siteMapNode>
    <siteMapNode url="~/Default3.aspx" title="Menu item 3"  description="">
      <siteMapNode url="~/pages/3/3-1.aspx" title="Test 3-1"  description="" />
      <siteMapNode url="~/pages/3/3-2.aspx" title="Test 3-2"  description="" />
      <siteMapNode url="~/pages/3/3-3.aspx" title="Test 3-3"  description="" />
    </siteMapNode>
    <siteMapNode url="~/Default4.aspx" title="Menu item 4"  description="">
      <siteMapNode url="~/pages/4/4-1.aspx" title="Test 4-1"  description="" />
      <siteMapNode url="~/pages/4/4-2.aspx" title="Test 4-2"  description="" />
      <siteMapNode url="~/pages/4/4-3.aspx" title="Test 4-3"  description="" />
      <siteMapNode url="~/pages/4/4-4.aspx" title="Test 4-4"  description="" />
    </siteMapNode>
    <siteMapNode url="~/Default5.aspx" title="Menu item 5"  description="">
      <siteMapNode url="~/pages/5/5-1.aspx" title="Test 5-1"  description="" />
      <siteMapNode url="~/pages/5/5-2.aspx" title="Test 5-2"  description="" />
      <siteMapNode url="~/pages/5/5-3.aspx" title="Test 5-3"  description="" />
    </siteMapNode>
  </siteMapNode>
</siteMap>

3. Style sheet: http://www.hallstensen.com/menuadapter/Style.txt

4. Modified MenuAdapter.cs: http://www.hallstensen.com/menuadapter/MenuAdapter.txt 

Answer 4

User1385547952 posted

3. Style sheet: http://www.hallstensen.com/menuadapter/Style.txt

4. Modified MenuAdapter.cs: http://www.hallstensen.com/menuadapter/MenuAdapter.txt 

Oh Man, your link is not working at all. Could U plz update it specially for Style.TXT

Thanks in advance,

Asem Ibohal.

Answer 5

User1385547952 posted

3. Style sheet: http://www.hallstensen.com/menuadapter/Style.txt

4. Modified MenuAdapter.cs: http://www.hallstensen.com/menuadapter/MenuAdapter.txt 

Oh Man, your link is not working at all. Could U plz update it specially for Style.TXT

Thanks in advance,

Asem Ibohal.