More in this section

Forums / General Discussions / Navigation - Highlight top-level when sub-page selected

Navigation - Highlight top-level when sub-page selected

2 posts, 0 answered
  1. Kevin
    Kevin avatar
    19 posts
    30 Sep 2010
    09 Feb 2011
    Link to this post

    I have a navigation widget, which I added to my template through the Sitefinity backend. (The template is based on a custom masterpage.)

    For type of navigation I chose "Horizontal with drop down menus," and then set it to display top level pages, with links to sub-pages in the drop downs.

    When I choose a sub-page I would like for the top-level link to appear highlighted, like the functionality here:

    I tried to do it with CSS, but, as you can see in the output below, only the lower node is tagged with the "rmSelected" class, and I don't know of a CSS selector that would let me select the parent node.

    01.<div id="ctl00_navtop_T20202CB7000_ctl00_siteMapControl" class="RadMenu RadMenu_AchcNav1">
    02.            <!-- 2010.3.1109.40 -->
    03.            <ul class="rmRootGroup rmHorizontal">
    04.                <li class="rmItem rmFirst">
    05.                    <a href="../accreditation-101" class="rmLink rmRootLink"><span class="rmText">Accreditation 101</span></a>
    06.                </li>
    07.                <li class="rmItem ">
    08.                    <a href="../programs" class="rmLink rmRootLink"><span class="rmText">Programs</span></a>
    09.                    <div class="rmSlide">
    10.                        <ul class="rmVertical rmGroup rmLevel1">
    11.                            <li class="rmItem rmFirst">
    12.                                <a href="home-health" class="rmLink"><span class="rmText">Home Health</span></a>
    13.                            </li>
    14.                            <li class="rmItem ">
    15.                                <a href="hospice" class="rmLink rmSelected"><span class="rmText">Hospice</span></a>
    16.                            </li>
    17.                            <li class="rmItem ">
    18.                                <a href="dmepos" class="rmLink"><span class="rmText">DMEPOS</span></a>
    19.                            </li>
    20.                            <li class="rmItem rmLast">
    21.                                <a href="sleep-lab" class="rmLink"><span class="rmText">Sleep Lab</span></a>
    22.                            </li>
    23.                        </ul>
    24.                    </div>
    25.                </li>
    26.                <li class="rmItem ">
    27.                    <a href="../about-achc" class="rmLink rmRootLink"><span class="rmText">About ACHC</span></a>
    28.                </li>
    29.                <li class="rmItem ">
    30.                    <a href="../news" class="rmLink rmRootLink"><span class="rmText">News</span></a>
    31.                </li>
    32.            </ul>
    33.            <input id="ctl00_navtop_T20202CB7000_ctl00_siteMapControl_ClientState" name="ctl00_navtop_T20202CB7000_ctl00_siteMapControl_ClientState" type="hidden" />
    34.        </div>

    Is there a way to get the navigation widget to also tag the ancestor nodes with the rmSelected class?
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    12 Sep 2017
    09 Feb 2011
    Link to this post
    Hi Kevin,

    You need a custom control to do this. Please check this post.

    All the best,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
2 posts, 0 answered