Tab Nav - How to make the parent Tab active when on Child page?

Permalink
Hi All,

I've been searching and tweaking code trying to get set a class to a parent tab when I'm in a child page/subsection. I've modified the autonav view.php file into my own template for ul/li and class settings.

-Home
-About Us
-Staff
--Management
--Developers
--etc
-Contact Us

The scenario is, when I'm on the main Staff page, the tab class="active". I'd like to get the Staff tab 'active' when I'm on the child page Management.

I've looked through the code and don't see any isChild methods. The hasChildren method doesn't do anything that I can see.

Anyone with a similar situation find a solution?

 
johanna replied on at Permalink Reply
Unfortunately, I don't have a solution but I'd need one myself for exactly same problem.
olay replied on at Permalink Reply
olay
I've had luck using the the following styles without altering the templates at all:

ul.nav-header li.nav-selected
ul.nav li.nav-selected

these seem to work then style as you wish

[the ul.nav / ul.nav-header depends on which template you are using for the auto nav]

When I say I've had luck with this it was pretty much trial and error in cssedit (a visual css editor)! So i'm sure someone might be able to correct me on the correct css.

I have it working for three levels. So in your case, lets say there is another child page x under management, when you were on that page x all the parents (management and staff) were selected and appeared as i had styled them.

I think I also might have had to put an "a" class on the end of them (e.g "ul.nav li.nav-selected a") to differentiate them from my more general a tag.
johanna replied on at Permalink Reply
Thank you very much! It was really simple solution and it works.
christiaan replied on at Permalink Reply
Unfortunately the classes aren't actually shown / used in the code to have them styled. They're there at the first level when clicked on, but any further (ie. 2nd level) there are no nav-selected classes in the code.
johanna replied on at Permalink Reply
Check: concrete/blocks/autonav/view.php (rows 37-41 in my file). I have a custom template for this. In my code the <li> element has been removed from if-else structure and the start tag with class is put before the structure instead. This way every <li> element can have the nav-selected class.

I hope I was clear enough... Well, you can ask me (: Hope this helped!
craftyCS replied on at Permalink Reply
craftyCS
I have set my CSS as this:

[/*tab nav across top of page*/

#cssnavTop ul.nav-header{
margin:0;
padding:0;
list-style-type:none;
font:"Times New Roman", Times, serif;
line-height:1.3em;
letter-spacing:2pt;
cursor:pointer;
font-weight: bold;
}
#cssnavTop ul.nav-header li {
position:relative;
color: #0084a9;
text-align:center;
background-image:url(../images/navTop_static.png);/* normal state of image*/
background-repeat:no-repeat;
width: 230px;
height: 74px;
cursor:pointer;
float:left;
}
#cssnavTop ul.nav-header li a {
text-decoration: none;
color: #0084a9;
display:block;
vertical-align: middle;
padding-top:30px;
height: 46px;
clear:both;
}
#cssnavTop ul.nav-header li a:hover, #cssnavTop ul.nav-header li a.nav-selected {
background-image: url(../images/navTop_active.png);/* over state of image*/
background-repeat:no-repeat;
color: #ffffff;
float:left;
width: 230px;
height: 74px;
display:block;
vertical-align: middle;
clear:both;
}
]
any reasons this would not automatically make the navigation highlight when on child pages?

any help appreciated
regards
Paul
superwire replied on at Permalink Reply
superwire
Out of the box, the navigation seemed to be set up so that when a page is placed underneath another, its parent li would still be selected as follows

<li class="nav-selected">

from here its easy to keep the tab highlighted for all child pages

however, Ive since made some template changes and now when viewing child pages there is nothing appearing in the code to highlight the selected tab? All the <li> elements are identical.

Does anyone know how I can revert to the original configuration? I havent customised the autonav block in any way.

Thanks
christiaan replied on at Permalink Reply
Hi, I've been coming up against this problem too, and just realised the nav-selected css styles move to different elements when using the default auto-nav block - they go from the a (link) to the li (list item) when on child pages, so I've included the below when styling my menus:

ul.nav-header li.nav-selected a,
ul.nav-header li a.nav-selected { custom-styles }

Regards,

Christiaan

EDIT: still not fixed - works only for default install.
As soon as default pages are deleted, this reverts back to not working with no selected styles...
superwire replied on at Permalink Reply
superwire
Thanks for your reply Christian. I worked out the problem - you have to make sure you assign the "Autonav" block to use the custom template "Header Menu". To do this, go into your page type default, click the navigation block and choose "Set Custom Template" from the drop down list.

This should then automatically detect the parent section of the page you are on, and mark it in the CSS as follows:

<li class="nav-selected ">

On a related issue, do you happen to know how to display the label of the parent page? I know that you can call the ID using:

echo $c->cParentID

If anyone can help it would be greatly appreciated. What Im trying to do is make it appear above the subnavigation on child pages of any given section on my site.

Thanks
christiaan replied on at Permalink Reply
Thanks so much - finally solved!
timalsina replied on at Permalink Reply
Under header.php I have the following code which displays the header nav.
<?php
$a = new Area('Header Nav');
$a->display($c);
?>
Now, when I create sub -sub pages, I don't see nav-seleected class on parent li item (nav-header). It is there in current page item though (nav).
ScottC replied on at Permalink Reply
ScottC
that code doesn't matter really
what you really need to check is how it iterates through the list to print out the LI list items, and get the collectionID for those.

so say

foreach($childrenArray as $cA){
if ($cA->getCollectionID() == $c->getCollectionID()){

//we're on that page, print out our custom class instead of the default one
}else{
//default stuff
}
lou28 replied on at Permalink Reply
I solved this problem just by using attribute selectors.