locked
Modify Menu adapter to show selected <ul> element RRS feed

  • 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 :)
    Thursday, January 31, 2008 6:12 PM

All replies

  • 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 

    Thursday, January 31, 2008 8:37 PM
  • User495249963 posted

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

    Friday, February 1, 2008 10:50 AM
  • 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 

    Friday, February 1, 2008 9:13 PM
  • 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.

    Tuesday, February 9, 2010 2:26 AM
  • 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.

    Tuesday, February 9, 2010 2:28 AM