creating menu with 3rd level nested elements

[Joduai]

As htmly allows to create a dynamic navigation menu with max 2nd lvl element nesting for dropdown menu purposes, according to issue #793 I provide a proof of concept allowing to get a 3rd lvl nested elements.
It's all about creating menu elements in menu editor with classes "first", "second", "third", and drag them in the right order.

You can download menu.json file that contains sample data, and upload it to /content/data directory.
You can simply add couple menu elements with classes first/second/third and drag&drop to arrange them.
Replacing file's content with "[]" or deleting menu elements in admin panel reverts back to default menu generation function.

Below code generates only html menu based on unordered lists without any CSS for drop down purposes.
Use it layout.html.php file, or create a function inside functions.php inside your template file and invoke it in proper layout file.

<nav>
<?php
$filename = "content/data/menu.json";
if (file_exists($filename)) {
	$json = json_decode(file_get_contents($filename, true));
	$menuItems = json_decode($json);
		if (!empty($menuItems)) {
			$menu = '';
			$firstLevelOpen = false;
			$secondLevelOpen = false;
			$thirdLevelOpen = false;
			$menu .= "<ul>";
			foreach ($menuItems as $item) {
				if ($item->class == 'first') {
					// close any opened 2nd + 3rds lvl <ul>
					if ($thirdLevelOpen) {
						$menu .= "</ul></li>"; // close 3rd lvl <ul>
						$thirdLevelOpen = false;
					}
					if ($secondLevelOpen) {
						$menu .= "</ul></li>"; // close 2nd lvl <ul>
						$secondLevelOpen = false;
					}
					// add 1st lvl item
					$menu .= "<li><a href='{$item->slug}'>{$item->name}</a>".PHP_EOL;
				} elseif ($item->class == 'second') {
					// close any opened 3rd lvl <ul>
					if ($thirdLevelOpen) {
						$menu .= "</ul></li>".PHP_EOL; // close 3rd lvl <ul>
						$thirdLevelOpen = false;
					}
					// open 2nd lvl <ul> within 1st lvl item
					if (!$secondLevelOpen) {
						$menu .= "<ul class=".$item->class.">"; // open 2nd lvl <ul>
						$secondLevelOpen = true;
					}
					// Add second-level item
					$menu .= "<li><a href='{$item->slug}'>{$item->name}</a>".PHP_EOL;
				} elseif ($item->class == 'third') {
					// open 3rd lvl <ul> within 2nd lvl item
					if (!$thirdLevelOpen) {
						$menu .= "<ul class=".$item->class.">"; // open 3rd lvl <ul>
						$thirdLevelOpen = true;
					}
					// add 3rd lvl item
					$menu .= "<li><a href='{$item->slug}'>{$item->name}</a></li>".PHP_EOL;
				}
			}
			// close remaining opened  2nd + 3rd lvl lists
			if ($thirdLevelOpen) {
				$menu .= "</ul></li>"; // close 3rd + 2nd lvl <li>
			}
			if ($secondLevelOpen) {
				$menu .= "</ul></li>"; // close 2nd + 1st lvl <li>
			}
			// top lvl </ul>
			$menu .= "</ul>";

			echo $menu;
		}	
}	
?>
</nav>

[danpros]

Please check the menu.html.php, find this one:

<script>
  $('.dd.nestable').nestable({
    maxDepth: 2
  })
  .on('change', updateOutput);
  

  $('#addMenu').click(function() {
    $('#menu-add').fadeIn();
  });
    
  $("#saveButton").click(function(){
    updateOutput($('.dd.nestable').data('output', $('#json-output')));
    var js = $('#json-output').val();
    $.ajax({
      type: 'POST',
      url: '<?php echo site_url();?>admin/menu',
      dataType: 'json',
      data: {'json': js},
      success: function (response) {
         alert(response.message);
         location.reload();
      },
    });    
  });
</script>

I set the max depth to 2. Try to change that first before move to next step.

[Joduai]

ohhh I didn't even know the drag&drop option allowed nesting elements.
Even though I dragged so many elements, not even single one popped in, and nested with its parent.
If I only knew, I'd search for the way of nesting more lvls instead of basing on the flat menu functionality 😑

Still it's only a proof of concept, but with your mentioned 1 simple edit everyone can nest as many menu lvls as can imagine.
Nonetheless I've learned something new ;)

[danpros]

To create dropdown menu you just need to drag and drop it to the right side actually.

At the moment I only set it to second level.

[danpros]

Seems we just need to change the depth, I already tested with twentysixteen theme.

[Joduai]

as for default themes, nested items below 2nd lvl works fine in twentyfifteen and twentysixteen themes. In Blog theme I suppose >=3rd lvl won't popup because of above described bug. Rest of the themes display only 1lvl flat menu having hidden <ul class="dropdown-menu"> thus raising option for nesting menu items from 2 to 3 works fine.

[danpros]

Regarding / after the slug it doesn't matter. And for the dropdown 3rd level in blog theme its because it use old bootstrap theme, seems impossible to generate menu based on specific bootstrap version, so decided to use to use regular menu style (bootstrap latest version and wordpress like menu generation or any normal dropdown menu).

Current problems with active' class is to set active' class for the 3rd or above parent li <li> .

Example 3rd level menu:

<ul class="nav navbar-nav nav-menu">
    <li class="item nav-item dropdown ">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="http://localhost/htmly-ai/">Home<b class="caret"></b></a>
        <ul class="subnav dropdown-menu" role="menu">
            <li class="item nav-item dropdown  active">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="http://localhost/htmly-ai/about/">About<b class="caret"></b></a>
                <ul class="subnav dropdown-menu" role="menu">
                    <li class="item nav-item active ">
                        <a class="nav-link" href="http://localhost/htmly-ai/contact/">Contact</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>  

We visiting the contact page, so all <li> should have an active class.

The parseNode functions only generate active class for the visited URL than we add the parent active class in menu functions. At the moment can only work for 2 level menu.

Can be fixed with CSS without adding active class to parent element it seems but the styling is very simple if all parent element for the visited URL have active class, simply .active {font-weight:bold;}

[Joduai]

My fault I misunderstood the approach to manage custom menu and generating it in frontend.
I wrongly assumed the nested elements will automatically get their parent slug in url after nesting them.

After tweaking menu items properly, and assuming we want to set active class only for currently visited page I got this output for menu function you pointed:

				foreach ($elements as $element) {
					$nodes = $element->childNodes;
					foreach ($nodes as $node) {
						$nclass = $node->getAttribute('class');
						if (stripos($nclass, 'active') !== false) {
							$node->setAttribute('class', trim($nclass) . ' active');
						} else {
							$parentClass = $element->getAttribute('class');
							if (stripos($parentClass, 'active') !== false) {
								$element->setAttribute('class', str_replace('active', '', $parentClass));
							}
						}
					}
				}

if somebody would like to check this using my sample data on for example AAAA element

"[{\"slug\":\"q\",\"name\":\"Q\",\"id\":1725890908077,\"class\":\"first\"},{\"slug\":\"\/a\",\"name\":\"A\",\"id\":1725741620976,\"class\":\"first\",\"children\":[{\"slug\":\"\/a\/aa\",\"name\":\"AA\",\"id\":1725741620979,\"class\":\"second\",\"children\":[{\"slug\":\"\/a\/aa\/aaa\",\"name\":\"AAA\",\"id\":1725741620980,\"class\":\"third\",\"children\":[{\"slug\":\"\/a\/aa\/aaa\/aaaa\",\"name\":\"AAAA\",\"id\":1725975389100,\"class\":\"fourth\"}]}]},{\"slug\":\"\/a\/ab\",\"name\":\"AB\",\"id\":1725744302845,\"class\":\"second\",\"children\":[{\"slug\":\"\/a\/ab\/aab\",\"name\":\"AAB\",\"id\":1725744302846,\"class\":\"third\"},{\"slug\":\"\/a\/ab\/abb\",\"name\":\"ABB\",\"id\":1725744302847,\"class\":\"third\"}]}]},{\"slug\":\"b\",\"name\":\"B\",\"id\":1725741620977,\"class\":\"first\",\"children\":[{\"slug\":\"bb\",\"name\":\"BB\",\"id\":1725741620981,\"class\":\"second\",\"children\":[{\"slug\":\"bbb\",\"name\":\"BBB\",\"id\":1725741620982,\"class\":\"third\"}]},{\"slug\":\"bc\",\"name\":\"BC\",\"id\":1725746060747,\"class\":\"second\",\"children\":[{\"slug\":\"bbc\",\"name\":\"BBC\",\"id\":1725746060748,\"class\":\"third\"}]}]},{\"slug\":\"c\",\"name\":\"C\",\"id\":1725741620978,\"class\":\"first\",\"children\":[{\"slug\":\"cc\",\"name\":\"CC\",\"id\":1725746060749,\"class\":\"second\",\"children\":[{\"slug\":\"ccc\",\"name\":\"CCC\",\"id\":1725746060750,\"class\":\"third\"}]},{\"slug\":\"cd\",\"name\":\"CD\",\"id\":1725746060751,\"class\":\"second\"}]}]"

the question is if we really need to set active class for elements that are nested deeper than 2nd lvl along with their parents?
Or else, should all parent elements in the path to last child elements get .active?

[danpros]

The parseNode, generate this kind of menu:

<ul class="nav navbar-nav nav-menu">
    <li class="item nav-item dropdown ">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="http://localhost/htmly-ai/">Home<b class="caret"></b></a>
        <ul class="subnav dropdown-menu" role="menu">
            <li class="item nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="http://localhost/htmly-ai/about/">About<b class="caret"></b></a>
                <ul class="subnav dropdown-menu" role="menu">
                    <li class="item nav-item active"> // visited page
                        <a class="nav-link" href="http://localhost/htmly-ai/contact/">Contact</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>  

And the menu functions:

<ul class="nav navbar-nav nav-menu">
    <li class="item nav-item dropdown ">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="http://localhost/htmly-ai/">Home<b class="caret"></b></a>
        <ul class="subnav dropdown-menu" role="menu">
            <li class="item nav-item dropdown active"> // added by menu functions
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="http://localhost/htmly-ai/about/">About<b class="caret"></b></a>
                <ul class="subnav dropdown-menu" role="menu">
                    <li class="item nav-item active"> // visited page
                        <a class="nav-link" href="http://localhost/htmly-ai/contact/">Contact</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>  

What we need is:

<ul class="nav navbar-nav nav-menu">
    <li class="item nav-item dropdown active "> // missing active class for 3rd level and above
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="http://localhost/htmly-ai/">Home<b class="caret"></b></a>
        <ul class="subnav dropdown-menu" role="menu">
            <li class="item nav-item dropdown active"> // added bymenu function
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="http://localhost/htmly-ai/about/">About<b class="caret"></b></a>
                <ul class="subnav dropdown-menu" role="menu">
                    <li class="item nav-item active"> // visited page
                        <a class="nav-link" href="http://localhost/htmly-ai/contact/">Contact</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>  

[Joduai]

Took me some time, but found the way to set .active for current, and all parent <li> nodes.

            // Loop through all <ul> with dropdown-menu class
            foreach ($elements as $element) {
                $nodes = $element->childNodes;
                foreach ($nodes as $node) {
                    $class = $node->getAttribute('class');
                    if (stripos($class, 'active') !== false) {
                        // Propagate "active" class to all parent <li> elements
                        $parentLi = $node;
                        while ($parentLi = $parentLi->parentNode) {
                            if ($parentLi->nodeName === 'li') {
                                $existingClasses = $parentLi->getAttribute('class');
                                $newClasses = trim($existingClasses . ' active'); // Add the active class
                                $parentLi->setAttribute('class', $newClasses);
                            }
                        }
                    }
                }
            }

After getting it done I realized this approach is flawed because when there are more elements nested inside <li class="active"> all of them will inherit css. I thought about adding .active only to parent ahrefs. I did get output, where all parent ahrefs get .active, and also only parent li of active ahref gets .active. Probably not the best solution along with code implementation, but that's all I could come up with.

            // Loop through all <ul> with dropdown-menu class
            foreach ($elements as $element) {
                $nodes = $element->childNodes;
                foreach ($nodes as $node) {
                    // check for active <li> elements
                    if ($node->hasAttributes() && stripos($node->getAttribute('class'), 'active') !== false) {
                        // get ahref inside active <li>
                        $ahrefElement = $finder->query('.//a', $node)->item(0);
                        if ($ahrefElement) {
                            // add .active to current ahref
                            $currentClass = $ahrefElement->getAttribute('class');
                            $ahrefElement->setAttribute('class', trim($currentClass . ' active'));
                            // traverse up the parent <li> elements to add .active to their ahref
                            $parentLi = $node;
                            while ($parentLi = $parentLi->parentNode) {
                                if ($parentLi->nodeName == 'li') {
                                    $parentAhrefElement = $finder->query('.//a', $parentLi)->item(0);
                                    if ($parentAhrefElement) {
                                        $parentAClass = $parentAhrefElement->getAttribute('class');
                                        $parentAhrefElement->setAttribute('class', trim($parentAClass . ' active'));
                                    }
                                }
                            }
                        }
                    }
                }
            }

outputted html code basing on my earlier provided custom menu

<li class="item nav-item dropdown first">
	<a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="/a/">A<b class="caret"/></a>
	<ul class="subnav dropdown-menu" role="menu">
		<li class="item nav-item dropdown second">
			<a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="/a/aa/">AA<b class="caret"/>
			</a>
			<ul class="subnav dropdown-menu" role="menu">
				<li class="item nav-item dropdown third">
					<a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="/a/aa/aaa/">AAA<b class="caret"/>
					</a>
					<ul class="subnav dropdown-menu" role="menu">
						<li class="item nav-item active fourth">
							<a class="nav-link active" href="/a/aa/aaa/aaaa/">AAAA</a>
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="item nav-item dropdown second"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="/a/ab/">AB<b class="caret"></b></a>
	</ul>
</li>

I would also have to trace where trailing slash is added, as such URI is meant to lead to directories, and I suppose boogle webaster tools won't give a damn about it.