Navigation - Highlight top-level when sub-page selected

Posted by Community Admin on 03-Aug-2018 17:10

Navigation - Highlight top-level when sub-page selected

Sitefinity - General Discussions

All Replies

Posted by Community Admin on 09-Feb-2011 00:00

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: http://demos.telerik.com/aspnet-ajax/menu/examples/programming/showpath/defaultcs.aspx?Page=Telerik%20Webinars

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?

Posted by Community Admin on 09-Feb-2011 00:00

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

This thread is closed