Mega menu works not 100%

[sreeb]

Hi everyone,

I made a mega menu with the help of a piece of code from this forum, but it not works 100% for my situation.

function renderChildrenOf($pa, $root = null, $output = '', $level = 0) {	
	
    
    if(!$root) $root = wire("pages")->get(1);
    $output = '';
    
    $level++;
    foreach($pa as $child) {
        $has_children = count($child->children()) ? true : false;
        $opening = '';
        $closing = '';
        
        if($has_children && $child === $root) {
			
			
            $output .= "\n\t<li><a href='{$child->url}'><div>{$child->title}</div></a></li>\n";
        }
        
        if(!$has_children) {
            $output    .= "<li><a href='{$child->url}'><div>{$child->title}</div></a></li>";
        }
        
        if($has_children && $child !== $root) {
			
			
            if($level == 1) {
                $opening  = "<li class='mega-menu'><a href='#'><div>{$child->title}</div></a>
								<div class='mega-menu-content style-2 clearfix'>
\n";
                $closing  = "</li>";
            }
            if($level == 2) {
                $opening = "\n<ul class='mega-menu-column col-md-3'>\t\n<li class='mega-menu-title'><div style='text-transform: uppercase!important; font-size:1.1em; margin:20px 0;'><strong>{$child->title}</strong></div>\n<ul>";
                $closing = "</ul></li></ul>";
            }
			
        }
        
        $output .= $opening;
        
        // If this child is itself a parent and not the root page, then render its children in their own menu too...
        if($has_children && $child !== $root) {
            $output .= renderChildrenOf($child->children(), $root, $output, $level);
        }
        
        $output .= $closing;

    }      
    return $output . "";
}

 

This code give me a good styled menu. But only when the menuitem has a child and that child has also a child.

But the menu items with only one child has no dropdown. instead of a dropdown he displayed the child next to the parrent in the root menu.

I want to have this code as output, when a menulink has one child.

<li class="sub-menu"><a href="index.html" class="sf-with-ul"><div>Home</div></a>
	<ul style="display: none;">
		<li class="sub-menu"><a href="index-corporate.html" class="sf-with-ul"><div>Home - Corporate</div></a></li>
		<li class="sub-menu"><a href="index-portfolio.html" class="sf-with-ul"><div>Home - Portfolio</div></a></li>
	</ul>
</li>

 

On http://dev.totaalschoorsteenspecialist.nl is the menu. As you can see the output of  menuitem "werkzaamheden" is goed. But the output of "projecten" isn't. The item "nieuwe dak incl isolatie" is a child of "projecten" so i want to display it as a dropdown as in the code above.

can anyone help me with this? Thanks a lot!

[arjen]

Hey @sreeb,

I can't see what your issue is, but have you tried MarkupSimpleNavigation? I haven't ever ran into a menu I couldn't build with this module. 

Please read the entire thread since I know there are some other mega menu's mentioned in the thread of this module.

 

 

[sreeb]

Hi @arjen,

Thanks. i had tryed marupsimplenavigation, but it doesn't work for me. i will try another one. Thanks!