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