Forums

nav-selected on sub-menu parent - HELP please!

Permalink
Hi all!

I have created my own drop down menu for a websitehttp://www.heartspacedundee.co.uk/... and have a problem with "Nav-selected"

I have a top menu with drop down sub-menus. When a sub menu is selected, I need the parent li to have the "nav-selected" value, as the li ul for the sub-menu needs to be set as "display:none;"

Before C5, I achieved this using "class.menu-active" on the parent menu li.

I cannot see how to achieve this in C5. HELP!

Thankyou - more will be clear if you take a peek at the site.. I hope!!
 
adajad replied on at Permalink Reply
adajad
I made a view.js in my menu block including the below which solved it for me:

$(document).ready(function(){
  $('ul.sub:has(a.selected)').prev('a').addClass('selectedParent');
});


In my view.css I have the classes a.selected and .selectedParent.
In view.php I added class "sub" at row 41 to call for from view.js.

40: if ($thisLevel > $lastLevel) {
41:   echo('<ul class="sub">');


I also use my own class (.selected) instead of the .nav-selected and .nav-path-selected since I at the moment couldn't wrap my head around the c5 structure.

There are probably several ways to fix this, and probably one easier than mine, but my approach works for me. Head over too http://www.spaceproduction.se if you want to see it in action (most obvious in the news section since those pages don't show in nav but the parent page still is "selected").
Johnny4x replied on at Permalink Reply
thanks adajad, trying to avoid more js at the moment.. but you did introduce me to "nav-path-selected" which ALMOST works, but seems to always want to display the "HOME" part of the menu...

ooooh so close!

J
adajad replied on at Permalink Reply
adajad
That was what I found also, that's why I went for the js method.

Good luck!
Johnny4x replied on at Permalink Reply
darn it! .. thanks anyway!
larsnieuwenhuizen replied on at Permalink Reply
larsnieuwenhuizen
Keep in mind that in your menu .previous() won't work because your second level menu items are children of the main <li> so if you want to use jQuery try something like:

Also there is a bug in your autonav template. Normally only the active page link has the class nav-selected and all links in the "breadcrumb" path have nav-path-selected.

So check if these lines in the template are correct:
if ($c->getCollectionID() == $_c->getCollectionID()) { 
            echo('<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" ' . $target . ' href="' . $pageLink . '">' . $ni->getName() . '</a>');
         } elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) && ($_c->getCollectionID() != HOME_CID) ) {
            echo('<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '" ' . $target . '>' . $ni->getName() . '</a>');
         } else {
            echo('<li><a href="' . $pageLink . '" ' . $target . ' >' . $ni->getName() . '</a>');
         }


If that is correct then you can use css for the class: .nav-selected for the active page and .nav-path-selected for all the parent pages.


Also mind that your javascript .prev won't work because subpages are children of the main menu so they can never be siblings. So if you want to use javascript you will have to use .parent().

But i'd try to focus on my first note because that'll fix a big problem.
adajad replied on at Permalink Reply
adajad
Your solution looks nice and the next time I style a menu I will probably do it differently than I have done now, but if you are referring to my jQuery nav, then I assume you haven't looked at my site, because if you do you will see it works as expected.