Problem with off-canvas menu

[tmode1960]

Hallo all...

I'm trying to make a off-canvas menu. It works well but with a litte output error.

This is the output it should looks like

<!-- how it should be -->
<ul>     
	<li><a href="#"><i class="fa fa-picture-o"></i>  Portfolio</a></li>
	<li><a href="#"><i class="fa fa-user"></i>  About</a></li>
	<li><a href="#"><i class="fa fa-envelope-o"></i>  Contact</a></li>
<li>
  <!-- Second tier dropdown -->
  <label for="dropdown-1" class="dropdown-1"><a><i class="fa fa-coffee"></i> Blog</a></label>
  <input type="checkbox" name="menu" id="dropdown-1">
	<ul class="dropdown-1">
    <!-- Dropdown links here -->
    <li><a href="#"><i class="fa fa-code"></i>  Tutorials</a></li>
    <li><a href="#"><i class="fa fa-eye"></i>  Inspiration</a></li>
  </ul>
</li>
</ul>

But it looks like

<!-- how it looks like -->
<ul>     
	<li><a href='/de/portfolio/'><i class='fa fa-file-text-o'></i> Portfolio</a></li>
	<li><a href='/de/about/'><i class='fa fa-file-text-o'></i> About</a></li>
	<li><a href='/de/contact/'><i class='fa fa-file-text-o'></i> Contact</a></li>
<li>										<!-- this should not be there -->
	<a href='/de/blog/'><i class='fa fa-file-text-o'></i> Blog</a>		<!-- this should not be there -->
	<li>
		<label for='dropdown-1' class='dropdown-1'><a><i class='fa fa-file-o'></i> Blog <i class='has-item fa fa-arrow-down'></i></a></label>
		<input type='checkbox' name='menu' id='dropdown-1'>
		<ul class='dropdown-1'>
			<li><a href='/de/blog/tutorials/'><i class='fa fa-file-text-o'></i> Tutorials</a>	</li>
			<li><a href='/de/blog/inspiration/'><i class='fa fa-file-text-o'></i> Inspiration</a></li>
		</ul>
	</li>
</ul>

And here is the render function

function renderOffCanvas(PageArray $items, array $options = array(), $level = 0) {

	$defaults = array(
		'tree' => 1, // number of levels it should recurse into the tree
		'repeat' => false, // whether to repeat items with children as first item in their children nav
		);

	$options = array_merge($defaults, $options); 
	$page = wire('page');
	$out = '';

	foreach($items as $item) {

		$numChildren = $item->numChildren(true);
		if($level+1 > $options['tree'] || $item->id == 1) $numChildren = 0;
		$class = '';
		if($numChildren) $class .= "";
		if($page->id == $item->id) $class .= "";
		if(($item->id > 1 && $page->parents->has($item)) || $page->id == $item->id) $class .= "";
		if($class) $class = " class='" . trim($class) . "'";

		$out .= "<li$class><a href='{$item->url}'><i class='fa fa-file-text-o'></i> {$item->title}</a>\n";

		if($numChildren) {
			$out .= "<li>\n<label for='dropdown-1' class='dropdown-1'><a><i class='fa fa-file-o'></i> {$item->title} <i class='has-item fa fa-arrow-down'></i></a></label>\n";
			$out .= "<input type='checkbox' name='menu' id='dropdown-1'>";
			$out .= "<ul class='dropdown-1'>\n";
				if($options['repeat']) $out .= "<li><a href='$item->url'>$item->title</a></li>\n";
				$out .= renderOffCanvas($item->children, $options, $level+1); 
			$out .= "</ul>";
		}
 
		$out .= "</li>\n";
	}

	return $out; 
}

I'm sure the error is in the render function, but I don't know where. Maybome someone can help me. And sorry that I can't show it online have only a local development environment.

Greetings Tom

[Jan Romero]

This line is executed regardless of whether $item has children:

$out .= "<li$class><a href='{$item->url}'><i class='fa fa-file-text-o'></i> {$item->title}</a>\n";

You’re going to want to attach it to the condition if($numChildren) { below, so the link is only appended to your output if it doesn’t have children. Perhaps like so:

if(!$numChildren) {
    //No children, so append the standard top-tier link
    $out .= "<li$class><a href='{$item->url}'><i class='fa fa-file-text-o'></i> {$item->title}</a>\n";
} else {
    //We have children here, so append the parent-style link and do the recursion
    //...
}

[tmode1960]

Thx a lot, works well.