Forums

Auto nav classes

Permalink
Hi there,
I have an auto nav which lists a series of pages and sub-pages, with a custom style based on the autonav template Like so:

About
- History
- People

What Id like to do is get the name of the parent page and pass it to the child page as a class, to help filtering. So something like:

<ul> About <ul>
<li class="about"> History </li>
<li class="about"> People </li>

How would I go about getting the parent name and adding it in as a class to the sub pages?
 
fotogenic replied on at Permalink Reply
What type of filtering are you trying to do exactly?

The built in filtering options should handle all that you need. Are you in 5.7? Can you give a little more detail at your end goal?
velocityboy replied on at Permalink Reply
Hi Chris, thanks for the reply.

It'll be a big list of pages, on one page. Each page in the list will have several classes in the li, (coming from different attributes). The search is able to go through these classes to get a result, but I'd like to also include the parent name as a class for so someone can also filter by that class.

For example:

<ul> Fruit </ul>
<li class="fruit red apple"> Red Apple</li>
<li class="fruit yellow banana">Banana</li>
</ul>

<ul> Veg </ul>
<li class="veg green pepper"> Pepper</li>
<li class="veg red tomato">Tomato</li>
</ul>

So the 'fruit' or 'veg' class would be added depending on parent name, and the other classes would be attributes, so someone could search for red and come up with apple and Tomato. Or red veg and just come up with tomato.

Does that make sense?

Everything works so far, except for the adding of the parent name as a class.

Cheers for the help!
siton replied on at Permalink Reply
siton
First your markup is wrong - not valid (its very important to know the correct markup before you try to create custom template)

** You can use (h2-h6) if you want "veg" to be with headline (its not <ul>header</ul><li></li>)
http://stackoverflow.com/questions/24880270/nesting-heading-tags-wi...

In one level <ul><li> you dont!! have any "parent" (only in nested lists you have "parent li"). so its impossible to use "parent" class in one level li (like your example)

Example markup:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_nest...

First:
You can use (un-comment)
1. "$ni->isFirst"
2. "$ni->hasSubmenu"
And also use this : $ni->name

Two parts:
PART 1 (set page name inside "class") its really really easy ($ni->name)
<li class="<?php $ni->name ?>"><a><?php $ni->name ?></a></li>

PART 2: This code will set to all li in same level the name. Use some "if" if you dont want class="coffe coffe" (this is tiny issue)
<ul>
  <li class="Coffee Coffee">Coffee
  <ul>
  <li class="Coffee Red cup" >Red cup</li>
  <li class="Coffee Blue cup" >Blue cup</li>
   </ul>
</li><!--close parent li-->
</ul>


In the next code we "combine" part1 & 2 strings output with (dot . ):
http://php.net/manual/en/language.operators.string.php...

The edit "code block" (line 110+- to 130+-). I only added var to save "first" name value and use this value. Thats it (Again in nested list this value will change in the nested list "first" li)
if (count($navItems) > 0) {
    echo '<ul class="nav">'; //opens the top-level menu
   $parent_to_child = "";
    foreach ($navItems as $ni) {
   if($ni->hasSubmenu){ //or is_first (same idea)
     $parent_to_child = $ni->name; 
   }
        echo '<li class="' . $ni->classes ." ". $ni->name ." ".$parent_to_child . '">'; //opens a nav item
        echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $ni->name . '</a>';
        if ($ni->hasSubmenu) {
            echo '<ul ' . $parent_to_child. '>'; //opens a dropdown sub-menu
        } else {
            echo '</li>'; //closes a nav item
            echo str_repeat('</ul></li>', $ni->subDepth); //closes dropdown sub-menu(s) and their top-level nav item(s)
        }
Viewing 15 lines of 17 lines. View entire code block.