dropdown menu (nested navigation) snippet
Posted: Mon Oct 12, 2020 12:19 am
Since in newer bludit versions buildParentPages() function stopped working - which was useful in creating nested navigation menus as shown in docs https://docs.bludit.com/en/dev-snippets ... d-subpages - I had to come up with a different solution. After completion I thought I'd share my small snippet, so those who would like to get a nested nav menu instead of flat 1lvl could make use of it.
Nav is based on unordered <ul> list:
Stylizing such dropdown menu with css is up to you.
Although you can start stylizing the menu using below simple css
Nav is based on unordered <ul> list:
Code: Select all
<ul>
<?php
foreach ($staticContent as $staticPage) {
$children = $staticPage->children();
if (!$staticPage->isChild())
{
echo '<li class="nav-item parent">';
echo '<a class="nav-link" href="'. $staticPage->permalink().'">'.$staticPage->title().'</a>';
if ($staticPage->hasChildren())
{
echo PHP_EOL.'<ul class="child">'.PHP_EOL;
foreach ($children as $child)
{
echo '<li class="nav-item child"><a href="'.$child->permalink().'">'.$child->title().'</a></li>'.PHP_EOL;
}
echo '</ul>'.PHP_EOL;
}
echo '</li>'.PHP_EOL;
}
}?>
</ul>
Stylizing such dropdown menu with css is up to you.
Although you can start stylizing the menu using below simple css
Code: Select all
ul {list-style: none;padding: 0;margin: 0;}
ul li {display: block;position: relative;float: left;}
li ul {display: none;}
ul li a {display: block;padding: 5px;text-decoration: none;}
ul li:hover {background: #f1f1f1;}
li:hover ul {display: block; position: absolute;min-width:100%;background: #f1f1f1;}
li:hover li {float: none;}
li li a:hover {color:#FFF;background: #9f9f9f;}