locked
CSS Friendly Menu - Need to set ancestor nodes as "Selected" RRS feed

  • Question

  • User1738472287 posted

    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?

    Friday, April 25, 2008 11:25 AM

All replies

  • User1735976268 posted

    Please post the resultant markup of your menu and I'll take a look see

    Friday, April 25, 2008 12:03 PM
  • User1738472287 posted

    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 &amp; Nutrition</a>
         <ul>
          <li class="AspNet-Menu-Leaf">
           <a href="/en_US/nutrition/beef/Pages/Introduction.aspx" class="AspNet-Menu-Link">
            Beef &amp; 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 &amp; 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 &amp; 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 &amp; 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>

    Friday, April 25, 2008 1:36 PM
  • User1735976268 posted

    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?

    Friday, April 25, 2008 3:27 PM
  • User1738472287 posted

    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.

    Friday, April 25, 2008 3:48 PM
  • User1735976268 posted

    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.

    Friday, April 25, 2008 4:08 PM
  • User1738472287 posted

    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.

    Friday, April 25, 2008 4:20 PM
  • User1735976268 posted

    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!

    Friday, April 25, 2008 4:54 PM