I am using the code from the Nested menu page as per below. The nested menu items do not collapse under the main heading for the section. So you have Services | Mindfulness | Therapy-services all on the same level. How do I fix this problem? Thanks.
<nav class="nav-collapse">
<ul class="header-links">
<?php foreach($items as $item): ?>
<li>
<a<?php e($item->isOpen(), 'class="active"') ?> href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
<?php
// get all children for the current menu item
$children = $item->children()->listed();
// display the submenu if children are available
if ($children->isNotEmpty()) :
?>+<ul class="sub-menu">
<?php foreach ($children as $child) : ?>
<li>
<a<?php e($child->isOpen(), ' class="active"') ?> href="<?= $child->url() ?>"><?= $child->title()->html() ?></a>
</li>
<?php endforeach ?>
</ul>
<?php endif ?>
</li>
<?php endforeach ?>
</ul>
</nav>
This is just code that doesnāt come with any styling, so you have to take care of this yourself.
If I was going to use something like this CSS-Only Accessible Dropdown Navigation Menu | Modern CSS Solutions how do I know where to markup the code if I have two separate sub-menus using the code above?
Not tested but i think something like this should do it:
<nav aria-label="Main Navigation">
<ul>
<?php foreach ($items as $item) : ?>
<?php
// get all children for the current menu item
$children = $item->children()->listed();
// display the submenu if children are available
if ($children->isNotEmpty()): ?>
<li class="dropdown">
<!-- aria-expanded needs managed with Javascript -->
<button <?php e($item->isOpen(), 'class="active"') ?> type="button" class="dropdown__title" aria-expanded="false" aria-controls="<?= $item->title()->html() ?>-dropdown">
<?= $item->title()->html() ?>
</button>
<ul class="dropdown__menu" id="="<?= $item->title()->html() ?>-dropdown"">
<?php foreach ($children as $child) : ?>
<li>
<a<?php e($child->isOpen(), ' class="active"') ?> href="<?= $child->url() ?>"><?= $child->title()->html() ?></a>
</li>
<?php endforeach ?>
</ul>
</li>
<?php else : ?>
<li>
<a<?php e($item->isOpen(), 'class="active"') ?> href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
</li>
<?php endif ?>
<?php endforeach ?>
</ul>
</nav>
Thanks, but it does not work. Loads code into the page output.
Thereās just a PHP opening tag missing in the button, should be
<button <?php e($item->isOpen(), 'class="active"') ?> type="button" class="dropdown__title" aria-expanded="false" aria-controls="<?= $item->title()->html() ?>-dropdown">
Oh whoops! i wondered why it colured half of it blue! sorry about that, i couldnt spot the mistake before i had to pop out for a while.
Hi,
Thanks for your help. I added the code but I get an offline message. The code now is:
<nav aria-label="Main Navigation">
<ul>
<?php foreach ($items as $item) : ?>
<?php
// get all children for the current menu item
$children = $item->children()->listed();
// display the submenu if children are available
if ($children->isNotEmpty()): ?>
<li class="dropdown">
<!-- aria-expanded needs managed with Javascript -->
<button <?php e($item->isOpen(), 'class="active"') ?> type="button" class="dropdown__title" aria-expanded="false" aria-controls="<?= $item->title()->html() ?>-dropdown">
<?= $item->title()->html() ?>
</button>
<ul class="dropdown__menu" id="="<?= $item->title()->html() ?>-dropdown"">
<?php foreach ($children as $child) : ?>
<li>
<a<?php e($child->isOpen(), ' class="active"') ?> href="<?= $child->url() ?>"><?= $child->title()->html() ?></a>
</li>
<?php endforeach ?>
</ul>
</li>
<?php else : ?>
<li>
<a<?php e($item->isOpen(), 'class="active"') ?> href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
</li>
<?php endif ?>
<?php endforeach ?>
</ul>
</nav>
Follow the instructions in the message and report the error that shows up.
Follow the instructions in the message and report the error that shows up.
I donāt see any instructions.
The message I get is:
This page is currently offline due to an unexpected error. We are very sorry for the inconvenience and will fix it as soon as possible.
Advice for developers and administrators:
Enable debug mode to get further information about the error.
Whoops\Exception\ErrorException thrown with message āUndefined variable $itemsā
Stacktrace:
#19 Whoops\Exception\ErrorException in /Users/dr/sites/localhost/Mindful/site/snippets/header.php:12
#18 Whoops\Run:handleError in /Users/dr/sites/localhost/Mindful/site/snippets/header.php:12
#17 include in /Users/dr/sites/localhost/Mindful/kirby/src/Filesystem/F.php:425
#16 Kirby\Filesystem\F:loadIsolated in /Users/dr/sites/localhost/Mindful/kirby/src/Filesystem/F.php:364
#15 Kirby\Filesystem\F:Kirby\Filesystem{closure} in /Users/dr/sites/localhost/Mindful/kirby/src/Filesystem/F.php:372
#14 Kirby\Filesystem\F:load in /Users/dr/sites/localhost/Mindful/kirby/src/Toolkit/Tpl.php:34
#13 Kirby\Toolkit\Tpl:load in /Users/dr/sites/localhost/Mindful/kirby/src/Template/Snippet.php:173
#12 Kirby\Template\Snippet:factory in /Users/dr/sites/localhost/Mindful/kirby/config/components.php:284
#11 Kirby\Cms\Core:{closure} in /Users/dr/sites/localhost/Mindful/kirby/src/Cms/App.php:1618
#10 Kirby\Cms\App:snippet in /Users/dr/sites/localhost/Mindful/kirby/config/helpers.php:515
#9 snippet in /Users/dr/sites/localhost/Mindful/site/templates/home.php:2
#8 include in /Users/dr/sites/localhost/Mindful/kirby/src/Filesystem/F.php:425
#7 Kirby\Filesystem\F:loadIsolated in /Users/dr/sites/localhost/Mindful/kirby/src/Filesystem/F.php:364
#6 Kirby\Filesystem\F:Kirby\Filesystem{closure} in /Users/dr/sites/localhost/Mindful/kirby/src/Filesystem/F.php:372
#5 Kirby\Filesystem\F:load in /Users/dr/sites/localhost/Mindful/kirby/src/Toolkit/Tpl.php:34
#4 Kirby\Toolkit\Tpl:load in /Users/dr/sites/localhost/Mindful/kirby/src/Template/Template.php:155
#3 Kirby\Template\Template:render in /Users/dr/sites/localhost/Mindful/kirby/src/Cms/Page.php:1071
#2 Kirby\Cms\Page:render in /Users/dr/sites/localhost/Mindful/kirby/src/Cms/App.php:796
#1 Kirby\Cms\App:io in /Users/dr/sites/localhost/Mindful/kirby/src/Cms/App.php:1235
#0 Kirby\Cms\App:render in /Users/dr/sites/localhost/Mindful/index.php:5
So the error message tells you what the problem is: Your variable $items is not defined.
So the error message tells you what the problem is: Your variable $items is not defined.
I donāt understand how do you define the variable $items?
Please refer to the recipe where you found the code. Itās all there.
How do I make the āservicesā and āinformationā menu items not clickable? So only the sub-menu items are.
I am also looking for a solution for this. As shown in your example, āservicesā and āinformationā should only open the submenu, but not display a content page. But in my case I use a different treemenu, nevertheless the principle is identical.
Hi,
I donāt have a solution Iām afraid which I need but have not heard back anything from Kirby support and as I am not a backend coder/developer I donāt have an answer. So if you come across how this can work I would be most appreciated.
Thanks,
David
You can use an if statement to decide if a page should be wrapped in an a tag or not. So if the page does have children, donāt use a link, but just a button to open the submenu.
Thanks for your suggestion. I really like the navigation you use in your guide https://getkirby.com/docs/guide/quickstart. If I click on a menu with submenu, the first article appears directly. Additionally, I have the possibility to expand or collapse the menu with +/-.
Is there a guide/cookbook how this navigation was realized with Kirby?
Thank you in advance for your support!
The repo for the getkirby.com website is public and available on GitHub:
Thereās a lot to learn from there (but not always easy to find your way around, as it is pretty complex).
1 Like