dropdown menu (nested navigation) snippet

Post Reply
User avatar
Jay
Master Bludit
Posts: 133
Joined: Mon Feb 11, 2019 8:41 pm

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:

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;}
Post Reply