Collapsible Tree Menu

Kirby 3 Solved ✅
1

Hi,

This issue is destroying me. I’m having a lot of issues creating a working collapsible tree menu system with page links. I’ve managed to create the collapsible tree menu as well as making the site pages into menu items. My issue is that every menu item opens a new page which mess up the tree structure since the page loading makes the tree restart and you are somewhere else in the menu hierarchy. The tree menu needs to always recover to the current position after page load.

Here’s the working collapsible tree structure:
https://nilsoh.com/treemenu_1/

To see the tree structure with page links as menu items (but not collapsible tree).
Change the url from “treemenu_1”, to “treemenu_2”, (I couldn’t embed more links since i’m a new user)

I’ve tried various ways to store the menu tree into sessionStorage and then load the menu tree on page load, but somewhere something is not working properly. I feel that I’m close to solving it since most parts are in place, but I’ve been stuck for days finding the solution.

Here’s the source code if anyone want to have a look:
https://we.tl/t-pFBtJy4JKQ

Main files to see are “CollapsibleLists.js” and “treemenu.php”.

Thankful for any help.

/Nils

2

One way to do this might be to use something like Barba which technically is for page transitions but all its really doing is swaping a portion of the page for the content of another. With this, you can swap out the right side of the page, but keep your menu intact.

You might not even need the complete barba - using javascript to swap the content might be enough.

Another way is to use the the Tree menu https://getkirby.com/docs/cookbook/templating/menus#tree-menu

This puts an active class on the currently open page in the menu. You could amend your javascript to react to that, which would open the menu up at the current page / level on page load.

3

Thanks for your response. I had a look at Barba but it wasn’t exactly what I was looking for.

I solved it now actually by using the cookie script from:
http://www.howtocreate.co.uk/tutorials/jsexamples/listCollapseExample.html

:slight_smile: