1

Topic: Default menu does not show the child pages

Hello dear Wolf members,

I'm using the following default layout's menu which is actually showing the main pages at the header but not  their child pages. For example the page About Us has 5 child pages and I would like that when bringing the cursor close to "About us" it shows its 5 pages, but it is not doing it. I've been looking at the forum and also the documentation but could not reach it. Could you please help me?

  <div id="menu">
                <ul>
                <li><a <?php echo url_match('/') ? ' class="active"': ''; ?> href="<?php echo URL_PUBLIC; ?>">Home</a></li>
                <?php foreach($this->find('/')->children() as $menu): ?>
                <li><?php echo $menu->link($menu->title(), (in_array($menu->slug(), explode('/', $this->url)) ? ' class="active"': null)); ?></li>
                <?php endforeach; ?> 
                </ul>
        </div>

Thumbs up

2

Re: Default menu does not show the child pages

Yes, the default menu does not fetch subpages, only 1st level of pages.

Try this:

<nav>
            <ul>
            <?php foreach($this->find('/')->children() as $menu): ?>
                <li class="navItem"><?php echo $menu->link('<span>'.$menu->title.'</span>', (in_array($menu->slug, explode('/', $this->path())) ? ' class="'.$menu->slug().' current"': ' class="' .$menu->slug().'"')); ?>
                    <?php if($menu->childrenCount() > 0) { 
                    $subchildren = $menu->children(); ?>
                    <ul class="subnav">
                        <?php foreach ($subchildren as $child) { ?>
                            <li><?php echo $child->link(); ?></li>
                        <?php } ?>
                    </ul>
                    <?php } ?>
                </li>
            <?php endforeach; ?>    
            </ul>
        </nav>

You can change css classes to fit your css.

Tutorials at Project 79 | Wolf CMS Docs

3

Re: Default menu does not show the child pages

Hello Jackie,

thank you for your reply.
I tried the code but is not doing completely what I want since it shows all the navigation menu. I would like that the children pages be shown just when placing or clicking the cursor on a given page link. How could it be implemented?

Thank you

Thumbs up

4

Re: Default menu does not show the child pages

It does listing of second child pages. Now you have to style it with either css or jquery to show or hide it on hover.

css should be something like this:

ul.subnav { display: none; }
ul.subnav:hover { display:block; }

or jquery:

$( document ).ready(function() {
    var subnav = $('ul.subnav');
    subnav.on("click", function() {
        $(this).show();
    });
    subnav.hide();
});

This is of top of my head but it should work.
css version reveals subnavigation on mousehover whereas jquery does it on click.

In either case you have to style your subnav.

Tutorials at Project 79 | Wolf CMS Docs

5

Re: Default menu does not show the child pages

I'm actually using the unqualified layout, does it have nothing to see?
When you say "try this code" (nav), do you mean to replace my <div id="menu"> code  by <nav> code?

Thumbs up

6

Re: Default menu does not show the child pages

Yes, replace your code with mine but add id=menu to nav.
After that try that css or jquery code.

Tutorials at Project 79 | Wolf CMS Docs

7

Re: Default menu does not show the child pages

Do you mean this?:

<nav>

<?php id=menu; ?>

            <ul>
            <?php foreach($this->find('/')->children() as $menu): ?>
                <li class="navItem"><?php echo $menu->link('<span>'.$menu->title.'</span>', (in_array($menu->slug, explode('/', $this->path())) ? ' class="'.$menu->slug().' current"': ' class="' .$menu->slug().'"')); ?>
                    <?php if($menu->childrenCount() > 0) {
                    $subchildren = $menu->children(); ?>
                    <ul class="subnav">
                        <?php foreach ($subchildren as $child) { ?>
                            <li><?php echo $child->link(); ?></li>
                        <?php } ?>
                    </ul>
                    <?php } ?>
                </li>
            <?php endforeach; ?>   
            </ul>
        </nav>

Thumbs up

8

Re: Default menu does not show the child pages

If the navigation for either the Notepad or Toolbox themes do what you want, you could try adapting them for your layout. The code is in the wiki (see "Themes" in the footer to this page), but it might be in need of updating....

Using Wolf CMS professionally and for profit? Please consider supporting Wolf financially. Thanks!

9

Re: Default menu does not show the child pages

Like this. And yes, replace old navigation code with this one.

<nav id="menu">
            <ul>
            <?php foreach($this->find('/')->children() as $menu): ?>
                <li class="navItem"><?php echo $menu->link('<span>'.$menu->title.'</span>', (in_array($menu->slug, explode('/', $this->path())) ? ' class="'.$menu->slug().' current"': ' class="' .$menu->slug().'"')); ?>
                    <?php if($menu->childrenCount() > 0) { 
                    $subchildren = $menu->children(); ?>
                    <ul class="subnav">
                        <?php foreach ($subchildren as $child) { ?>
                            <li><?php echo $child->link(); ?></li>
                        <?php } ?>
                    </ul>
                    <?php } ?>
                </li>
            <?php endforeach; ?>    
            </ul>
        </nav>

Or check Davids links and "steal" code from the theme.

Tutorials at Project 79 | Wolf CMS Docs

10

Re: Default menu does not show the child pages

I've been trying your suggestions but the styling is being changed. Could it be possible just to modify the default "menu" in the layout in order to consider one level of submenu?. I would like to include a submenu to that elements of the main menu who had children by including another foreach inside the first one, but I'm not used to programm on php/html. How would that code be?

  <div id="menu">
                <ul>
                     <li><a <?php echo url_match('/') ? ' class="active"': ''; ?> href="<?php echo URL_PUBLIC; ?>">Home</a></li>
                        <?php foreach($this->find('/')->children() as $menu): ?>
                        <li><?php echo $menu->link($menu->title(), (in_array($menu->slug(), explode('/', $this->url)) ? ' class="active"': null)); ?></li>
                       
                     <?php endforeach; ?>
                </ul>
        </div>

Thumbs up