How to add active class to menu item in one-pager layout

Kirby 2 Solved ✅
1

I have a one-pager layout with sections.

If i had a classic file structure with pages and subpages and wanted to add the class “active” to the currently active menu item i would be able to use
$child->isOpen(), like here:

<?php foreach($children as $child): ?>
<li class="menu-item"><a<?php e($child->isOpen(), ' class="active"') ?> href="<?php echo $child->url() ?>"><?php echo $child->title()->html() ?></a></li>
<?php endforeach ?>

But as i need to construct a custom URL with an anchor for my section, i use the following:

<?php foreach($children as $child): ?>
<li class="menu-item"><a href="<?= $item->url() . '#' . str::slug($child->title()) ; ?>"><?= $child->title()->html() ?></a></li>
<?php endforeach ?>

Unfortunately i can’t use $child->isOpen() for this.

How can i add the active class to my menu item?

My navigation in context:

<nav class="docs-nav" role="navigation">
	<div class="accordion-container">
		<?php
		// nested menu
		$items = $pages->visible();

		// only show the menu if items are available
		if($items->count()):
		
		?>
		<?php foreach($items as $item): ?>
			<div class="accordion">
				<input type="checkbox" id="docs-accordion-<?php echo $item->num() ?>" name="docs-accordion-checkbox" hidden <?php e($item->isOpen(), ' active') ?>>
				<label class="accordion-header c-hand" for="docs-accordion-<?php echo $item->num() ?>"><?php echo $item->title()->html() ?></a></label>

				<?php
				// get all children for the current menu item
				$children = $item->children()->visible();

				// display the submenu if children are available
				if($children->count() > 0):

				?>
					<div class="accordion-body">
						<ul class="menu menu-nav">
						<?php foreach($children as $child): ?>
							<li class="menu-item"><a href="<?= $item->url() . '#' . str::slug($child->title()) ; ?>"><?php $child->title()->html() ?></a></li>
						<?php endforeach ?>
						</ul>
					</div>
				<?php endif ?>

			</div>
		<?php endforeach ?>
	</div>
</nav>
2

As it is also possible to scroll though all the sections within the page it would be even better to dynamically add this class to the currently seen section / anchor / menu item. I found this jsfiddle example, but have to get my head around it first.

3

For the scrolling, ive used Scrollit before which allows you to scroll to a data attribute. It can do the active menu classes as well. Shouldn’t be to hard to dynamically fill in the attribute / target pairs. I did something like this if it helps…

<?php
$yourpages = $site->find('about')->children();
?>
  <?php foreach($yourpages as $yourpage): ?>
  <section data-scroll-index="<?= $yourpage->num() ?>">
      <h1><?= $yourpage->title()->html() ?> </h1>
      <?php
        $num1 = $yourpage->num();
        $num2 = 1;
        $target =  $num1+$num2;
      ?>
      <a data-scroll-goto="<?= $target ?>"><i class="fa fa-chevron-down" aria-hidden="true"></i></a>
    </section>
  <?php endforeach ?>

That will give each item in a list an index, and add a link to the bottom of each one to move on to the next panel.

4

Server side PHP doesn’t make sense in a one-pager, so you definitely need some JavaScript here. But unless you. already use jQuery, I’d look for a script that doesn’t depend on jQuery.

5

OK, thanks for the suggestion(s).

6

Here are two vanilla JS libraries: