Bootstrap nav-bar
3 posts by 2 authors in: Forums > CMS Builder
Last Post: August 3, 2014 (RSS)
By Toledoh - July 31, 2014
Hi Guys,
I'm trying to emulate the bootstrap navbar with the category menu generator.
The stock standard generator is
<?php foreach ($pagesRecords as $categoryRecord): ?>
<?php echo $categoryRecord['_listItemStart'] ?>
<?php if ($categoryRecord['_isSelected']): ?>
<b><a href="<?php echo $categoryRecord['_link'] ?>"><?php echo $categoryRecord['name'] ?></a></b>
<?php else: ?>
<a href="<?php echo $categoryRecord['_link'] ?>"><?php echo $categoryRecord['name'] ?></a>
<?php endif; ?>
<?php echo $categoryRecord['_listItemEnd'] ?>
<?php endforeach; ?>
I need to produce the following
<li class="active"><a href="#">Category (no children / selected)</a></li>
<li><a href="#">Category (no children)</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Category (with children) <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Child Category</a></li>
<li><a href="#">Child Category</a></li>
<li><a href="#">Child Category</a></li>
</ul>
</li>
Red: class=active for the selected category
Green: class-"dropdown" for when a category has children.
Then,the link for that category is not the link_url, but <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
the ul containing the children needs to have: class="dropdown-menu" role="menu"
Is that possible?
Tim (toledoh.com.au)
By gregThomas - August 1, 2014
Hey Tim,
I implemented this exact system into another site the other day. Firstly, you'll need to set up a couple of call back functions that are used to inject the drop down menu classes into the appropriate UL and LI tags:
// load pages
list($categories, $selectedCategory) = getCategories(array(
'tableName' => 'categories',
'ulAttributesCallback' => 'customMenuUlAttr', // ADVANCED: custom function to return ul attributes, eg: myUlAttr($category);
'liAttributesCallback' => 'customMenuLiAttr', // ADVANCED: custom function to return li attributes, eg: myLiAttr($category);
));
function customMenuUlAttr($category) {
return ($category['_hasParent'] && $category['depth'] == '1')? "class=\"dropdown-menu\" role=\"menu\"" : "" ;
}
function customMenuLiAttr($category) {
return ($category['_hasChild'] && $category['depth'] == '0')? 'class="dropdown"': "" ;
}
So the customMenuUlAttr function checks if we're dealing with a second level item, and it has a parent. If both of these are true, it injects the drop down menu code.
The customMenuLiAttr function adds the class drop down to the top level li tag if it has children.
After this it's just a case of making sure other items are added to the links that display when you loop thorugh the categories. For example adding a dropdown-toggle class to a parent link, by checking the current category has a depth of zero, and has children in an if statement.
You can look at all of the meta fields that are included in a category section using the showme function:
showme($categoryRecord);
Adding the active class is a case of checking what the current select menu item is, and seeing if it matches the loop item. The current selected item is returned as the second item in the getCategories function. So using my above example I would use the following code:
<?php if ($category['num'] == $selectedCategory['num']:?>class="active"<?php endif; ?>
Let me know if you have any questions.
Cheers
Greg
PHP Programmer - interactivetools.com