Just another Bootstrap 3.1.1 approach "fix for unlinkable dropdown main page"

[Faisal]

Hi all

In Bootstrap 3.1.1 If you have a header page that has a child page, the main page cannot be linkable.
So you have to duplicate the main page to be the first child of itself.

The result will be:

Home

- Main Page (Not linkable)

-- Main Page (Linkable to the upper page)

-- divider (Please not I also make the line brake 'divider' to appear only here, you can change it back like it was or whatever you want depending on your needs)

-- Sub Page (Linkable)

-- Sub Page (Linkable)

Instead of:

Home

- Main Page (Not linkable)

-- Sub Page (Linkable)

-- Sub Page (Linkable)

I am not code writer so I take the renderTopNav function from the Zurb Foundation 4 Site Profile Version 1.0.1 made by Ryan and play with it a bit.

here is the original function from Zurb Foundation 4 Site Profile:

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

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

	$options = array_merge($defaults, $options); 
	$divider = $options['dividers'] ? "<li class='divider'></li>" : "";
	$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 .= "has-dropdown ";
		if($page->id == $item->id) $class .= "current ";
		if(($item->id > 1 && $page->parents->has($item)) || $page->id == $item->id) $class .= "active ";
		if($class) $class = " class='" . trim($class) . "'";

		$out .= "$divider<li$class><a href='$item->url'>$item->title</a>";

		if($numChildren) {
			$out .= "<ul class='dropdown'>";
			if($options['repeat']) $out .= "$divider<li><a href='$item->url'>$item->title</a></li>";
			$out .= renderTopNav($item->children, $options, $level+1); 
			$out .= "</ul>";
		}
 
		$out .= "</li>";
	}

	return $out; 
}

And here what I came up with:

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

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

	$options = array_merge($defaults, $options); 
	$divider = $options['dividers'] ? "<li class='divider'></li>\n" : "";
	$page = wire('page');
	$out = '';

	foreach($items as $item) {

		$numChildren = $item->numChildren(true);
		if($level+1 > $options['tree'] || $item->id == 1) $numChildren = 0;
		$class = '';
                $toggle = '';
                $caret = '';
		if($numChildren) $class .= "dropdown ";
                if($numChildren) $toggle .= ' class="dropdown-toggle" data-toggle="dropdown"';
                if($numChildren) $caret .= ' <b class="caret"></b>';
		if(($item->id > 1 && $page->parents->has($item)) || $page->id == $item->id) $class .= "active ";
		if($class) $class = " class='" . trim($class) . "'";

		$out .= "<li$class><a$toggle href='$item->url'>$item->title$caret</a>";

		if($numChildren) {
			$out .= "<ul class='dropdown-menu'>\n";
			if($options['repeat']) $out .= "<li><a href='$item->url'>$item->title</a></li>\n$divider\n";
			$out .= renderTopNav($item->children, $options, $level+1); 
			$out .= "</ul>\n";
		}
 
		$out .= "</li>\n";
	}

	return $out; 
}

Usage:

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                
                <?php
                echo renderTopNav($homepage->children->prepend($homepage)); // call renderTopNav function
                ?>
                
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

Please feel free to edit, fix, redistribute or whatever you need to do to help others.

Thanks

[le-serg]

Thank you!

[kibod]

Thank you sir. This is a great solution for my today menu problem. It works good.