Having trouble with nested menus for Parent, Child and Grandchild

Kirby 2 Solved ✅
1

Hi there.

Sorry if this has been asked a million times before >.>

I’m having a bit of trouble with my menu I understand the concept but in practice I keep stuffing it up. I’ve read through the documentation on the site “fun with menus” but I can’t seem to adapt it to what I’ve done so far.

It works fine, it was basically the menu code that’s provided in the starter kit plus an extra loop for children.

I understand that I need another loop between the middle list to:

  • Check if visible
  • Check if active
  • Display child

But for what ever reason no matter what I write I get a lot of errors and I’m just a bit stuck :confused: so I appreciate any all a help.

<ul class="menu cf">
<?php foreach($pages->visible() as $p): ?>
	<li>
  		<a <?php e($p->isOpen(), ' class="active"') ?> href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a>

  		<?php if($p->hasVisibleChildren()): ?>
 			<ul class="submenu">
  			<a href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a
    			<?php foreach($p->children()->visible() as $p): ?>
					<li>
						<a href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a>
					</li>
   				<?php endforeach ?>
  			</ul>
		<?php endif ?>

	</li>
<?php endforeach ?>
</ul>

</nav>
2

You use the same variable for the main pages and the children. Change the second foreach loop to

<?php foreach($p->children()->visible() as $child): ?>
  <li>
    <a href="<?php echo $child->url() ?>"><?php echo $child->title()->html() ?></a>
  </li>
<?php endforeach ?
1 Like
3

Okay awesome what I did is, I put the above for each loop into the second for each loop I had.

So now the grandchildren are being shown in the same menu.
Parent (menu bar)

  • Parent
    – Child
    — Grandchild
    – Child

If I wanted the grandchild to be indented or in a separate side menu pop out, should that be done in JS or CSS?

Thanks for the help again!

4

Yes, that would be done with CSS. :slight_smile:

5

i use JS to add/remove a class named ‘open’ on hover.

$('ul.menu li').hover( 
    function() { $(this).children('.submenu').addClass('open'); }, 
    function() { $(this).children('.submenu').removeClass('open'); } 
);

CSS defines…

.submenu { display: none; }
.submenu.open { display: inherit; }
6

Thank you I’ll give it a try :slight_smile:

7

Why don’t you just use ul.menu li:hover .submenu {} in your CSS? Then it would also work if the JS doesn’t run (doesn’t have to be “JS not enabled”, but can also be “jQuery does not load”). :slight_smile:

8

yes. pure css is in fact all you need :slight_smile: