I am trying to build a menu with three levels, but the second level is like a ‘fake’ level because it won’t have any content, it shall just be for the organization. I am not a good (or even) a programmer but I try my best.
this is a screenshot of the menu how it should look like:
oi60. tinypic. com/ 3013wao. jpg
‘Projekte’ is level 1 in the menu
’Film’, ‘Fotografie’ and ‘Unterwegs’ are level 2
’Dokumentation’, ‘Musikvideo’, ‘Imagefilm’ and so on are level 3 and the first three ones are a child from ‘Film’ (I guess the layout explains it good)
my problem is, that I do not understand how to show level 2 and level 3 at the same time. I tried the treemenu and nested menu from the kirby wiki but I was not able to make it work.
this is my html/php:
<?php
// main menu items
$items = $pages->visible();
// only show the menu if items are available
if($items->count()):
?>
<nav>
<ul>
<?php foreach($items as $item): ?>
<li>
<a<?php e($item->isOpen(), ' class="active"') ?> href="<?php echo $item->url() ?>">
<?php echo $item->title()->html() ?>
</a>
</li>
<?php endforeach ?>
</ul>
</nav>
<?php endif ?>
<?php
$items = false;
// get the open item on the first level
if($root = $pages->findOpen()) {
// get visible children for the root item
$items = $root->children()->visible();
}
// only show the menu if items are available
if($items and $items->count()):
?>
<nav class="submenu">
<ul>
<?php foreach($items as $item): ?>
<li>
<a<?php e($item->isOpen(), ' class="active"') ?> href="<?php echo $item->url() ?>">
<?php echo $item->title()->html() ?>
</a>
</li>
<?php endforeach ?>
</ul>
</nav>
<?php endif ?>
<?php
// independent sub sub menu
$items = false;
// get the open item on the first level
if($root1 = $pages->findOpen()) {
// get the open item on the second level
if($root2 = $root1->children()->findOpen()) {
// get visible children of the second level item
$items = $root2->children()->visible();
}
}
// only show the menu if items are available
if($items and $items->count()):
?>
<nav class="subsubmenu">
<ul>
<?php foreach($items as $item): ?>
<li>
<a<?php e($item->isOpen(), ' class="active"') ?> href="<?php echo $item->url() ?>">
<?php echo $item->title()->html() ?>
</a>
</li>
<?php endforeach ?>
</ul>
</nav>
<?php endif ?>
thank you very much!
I tried that and played around with your code as a basis but it did not work either.
so I managed it right now with a ‘static’ menu, sadly it will not be customizable after the website will be online.
Provided that the above structure is correct, this should work (at least if I haven’t forgotten to close any tags etc.):
<?php
//get the projects page on first level
$page = page('projects');
?>
<nav>
//show headline of project page
<h3><a href="<?php echo $page->url()"><?= $page->title() ?></a></h3>
// check if page has children (third level)
<?php if($page->hasChildren() : ?>
<ul>
//fetch the children of the second level (fake menu, i.e. no clickable links)
<?php foreach ($page->children()->visible() as $child): ?>
<li><?php echo $child->title() ?></li>
// check if child has children (third level)
<?php if($child->hasChildren() : ?>
<ul>
//fetch all third level children and link to them
<?php foreach($child->children()->visible() as $grandChild) : ?>
<li><a href="<?php echo $grandChild->url() ?>"><?php echo $grandChild->title() ?></a></li>
<?php endforeach ?>
</ul>
<?php endif ?>
<?php endforeach ?>
</ul>
<?php endif ?>
</nav>
You can add a new file “/site/snippets/treemenu.php” which can look like the code from the part “Tree menu” at https://getkirby.com/docs/cookbook/menus#tree-menu, which shows all visible pages of your website.
At the place you want to see the main menu (e.g. in the file “/site/snippets/header.php”), you add:
Now you should add some css in your css-file, but that is your job, because we don’t know your wanted design. And add needed parts in the code of the rendered page like or insite of class=" ... " in this code!
Thanks a lot. “sub sub menu” was what I was looking for.
Tutorial for users like me:
Create site/snippets/subsubmenu.php with following content:
<?php
// independent sub sub menu
$items = false;
// get the open item on the first level
if($root1 = $pages->findOpen()) {
// get the open item on the second level
if($root2 = $root1->children()->findOpen()) {
// get visible children of the second level item
$items = $root2->children()->visible();
}
}
// only show the menu if items are available
if($items and $items->count()):
?>
<nav>
<ul>
<?php foreach($items as $item): ?>
<li><a<?php e($item->isOpen(), ' class="active"') ?> href="<?php echo $item->url() ?>"><?php echo $item->title()->html() ?></a></li>
<?php endforeach ?>
</ul>
</nav>
<?php endif ?>
Yes, this is a CSS issue. As @texnixe wrote above, you can use your browser’s dev tools to inspect the elements. You can then find out which CSS rule is responsible.
If the site is live and you tell us the URL we can check for you, but please note that CSS issues are normally not inside the scope of Kirby support.
Thank you for very much. I already wrote Bastian via mail to enable subsub[…]sub menus as a default feature so I hope my request is helping to improve the whole CMS.
Thank you for the idea, but unfortunately this isn’t really something that can become a Kirby feature. The CMS itself already supports it (so that you were able to integrate it into your site) and the Kirby starterkit has been completely improved since. The starterkit is also just an example, it can’t use every Kirby feature.
Maybe I mixed Kirby CMS with Kirby starter kit. For me this was the same (until now).
So if I need another navigation bar (“subsub_sub_” as 3rd level) I need a php developer if I’m not a programmer?
I tried to do the same as for sub_sub_menu and added in addition to site/snippets/subsubmenu.php a site/snippets/subsubsubmenu.php.
Without knowing what I’m doing I tried to upgrade subsubsubmenu.php from:
<?php
// independent sub sub menu
$items = false;
// get the open item on the first level
if($root1 = $pages->findOpen()) {
// get the open item on the second level
if($root2 = $root1->children()->findOpen()) {
// get visible children of the second level item
$items = $root2->children()->visible();
}
}
// only show the menu if items are available
if($items and $items->count()):
?>
<nav>
<ul>
<?php foreach($items as $item): ?>
<li><a<?php e($item->isOpen(), ' class="active"') ?> href="<?php echo $item->url() ?>"><?php echo $item->title()->html() ?></a></li>
<?php endforeach ?>
</ul>
</nav>
<?php endif ?>
to:
<?php
// independent sub sub sub menu
$items = false;
// get the open item on the first level
if($root1 = $pages->findOpen()) {
// get the open item on the second level
if($root2 = $root1->children()->findOpen()) {
// get the open item of the third level item
if($root3 = $root2->children()->findOpen()) {
// get visible children of the third level item
$items = $root3->children()->visible();
}
}
// only show the menu if items are available
if($items and $items->count()):
?>
<nav>
<ul>
<?php foreach($items as $item): ?>
<li><a<?php e($item->isOpen(), ' class="active"') ?> href="<?php echo $item->url() ?>"><?php echo $item->title()->html() ?></a></li>
<?php endforeach ?>
</ul>
</nav>
<?php endif ?>
…which unfortunately doesn’t work and ends up with breaking the whole page. If I did just a simple mistake I would be thankful for a explanation how to upgrade “subsub” to “subsubsub”. I would add a step by step tutorial for ppl like me here then.
Yes. Kirby is just providing the framework and the tools you need to build a site. It isn’t a site on its own.
You can see what developers have created with Kirby in our showcase.
Hmmm, do you really need three or even more navigation levels? Maybe there is a better way to get at the information in the deeper navigation levels.
Hmmm, do you really need three or even more navigation levels? Maybe there is a better way to get at the information in the deeper navigation levels.
[/quote]
I’m very open for any other solutions. I’ve chosen Kirby to set up a project page for a student project/movement in just one day.
So the initial page was just about one project and menu with sub menu was enough to get an intuitive structure.
Now I started another student project as a child project of the first. So I need a sub-sub menu to display the menu structure as:
For child project 1 I’m listing all content in just one page at the moment but this way there is too much information in one page because I have to list “short description”, “long description”, “support us”, “petition text”, “contact” and more (https://jahr1nachsnowden.de/initiativen/nachfolgeinitiativen/gnuhu-linux).
Using a of sub/sub/sub menu is very intuitiv in my opinion because you always know where you currently are on the page.
But as I said I’m very open to other structure methods: how do you would structure this?
