Navigation Dropdown Coding

8 posts by 5 authors in: Forums > CMS Builder
Last Post: April 28, 2014   (RSS)

Hi there, 

Trying to add in classes to navbar code but don't really understand whats possible with getCategories - is there any detailed documentation on all the various options?

Here's the code I am trying to get output, I'm stuck on getting class="has-dropdown" added if there are children. Seems like I might have solved the  class="dropdown" one. 

<ul>
    <li><a href="#">Top Level Item</a></li>
    <li class="has-dropdown">
     <a href="#">Top Level Item</a>
        <ul class="dropdown">
        <li><a href="#">Second Level Item</a></li>
        <li><a href="#">Second Level Item</a></li>
        <li><a href="#">Second Level Item</a></li>
        </ul>
    </li>
    <li><a href="#">Top Level Item</a></li>
    <li><a href="#">Top Level Item</a></li>
</ul>

And this is my php code:

<?php
// load records
list($pagesRecords, $pagesMetaData) = getCategories(array(  
'tableName'   => 'pages',
'defaultCategory' => '', // Enter 'first', a category number, or leave blank '' for none
'rootCategoryNum' => '0', // Only categories _below_ this one will be shown (defaults to 0 for all)
'categoryFormat' => 'showall', // showall, onelevel, twolevel, breadcrumb
'ulAttributes' => " class='dropdown' ", // add html attributes to <ul> tags
'ignoreHidden' => true, // don't hide records with hidden flag set
'useSeoUrls' => true,
));
?>

<ul>
<?php $inactiveChild=0; ?>
<?php $childCount=0; ?>
<?php foreach ($pagesRecords as $record): ?>
<?php if ( $record['depth'] > 1 ) { continue; } ?> 
 <?php if($record['active']==1): ?>
<?php if($inactiveChild && !$record['_hasParent']): ?></ul></li><?php endif ?>
<?php if($record['_hasParent']): ?><?php $childCount++; ?><?php else:?><?php $childCount=0;?><?php endif ?><?php $inactiveChild=0; ?>
<?php echo $record['_listItemStart']; ?><a href="<?php echo strtolower($record['_link']); ?>"><?php echo htmlspecialchars($record['name']);?></a><?php echo $record['_listItemEnd'];?>    
  <?php else: ?>
 <?php if($record['_hasParent'] && $childCount==0): ?><ul><?php $childCount++; ?><?php endif ?>
 <?php if($record['_hasParent']): ?><?php $inactiveChild=1;?><?php else: ?><?php $inactiveChild =0; ?><?php endif ?>
  <?php endif ?>
<?php endforeach ?>
</ul>

Any Suggestions?

By Chris - April 21, 2014

Thanks, rez!

Yes, I think it's _hasChild that you're looking for, theclicklab. Does that help?

All the best,
Chris

Thanks for those comments, good to know all those optiones exist, so how do I inject a class into _listItemStart IF _hasChild is true. Do I need to drop using _listItemStart ? and hard code in <li>? 

By Chris - April 22, 2014

One solution could be to replace 

<?php echo $record['_listItemStart']; ?>

...with...

<?php
  if ($record['_hasChild']) {
    echo str_replace('<li>', '<li class="has-dropdown">', $record['_listItemStart']);
  }
  else {
    echo $record['_listItemStart'];
  }
?>

Does that help?

All the best,
Chris

Thanks Chris & Res, I have this working now. Much appreciated. 

By Mikey - April 25, 2014

Hey clicklab,

Sounds like you already have a solution worked out, but here's solution I developed a while back that has worked well on many of the websites I've built and has some additional features built into it.

http://www.interactivetools.com/forum/forum-posts.php?postNum=2232982#post2232982

By aev - April 28, 2014

Hi,

here is another method Dave showed me some time ago. I use this on all sites we create, works very good and is easy to adapt.

Remove your existing code in RED and replace with new code in BLUE in the list (load records) code. For the "customMenuUlAttr" and "customMenuLiAttr" I included more code than you need for your case just to some some examples. You need the one marked in BLUE.

  // load records
  list($pagesRecords, $pagesMetaData) = getCategories(array(  
    'tableName'   => 'pages',
    'defaultCategory' => '', // Enter 'first', a category number, or leave blank '' for none
    'rootCategoryNum' => '0', // Only categories _below_ this one will be shown (defaults to 0 for all)
    'categoryFormat' => 'showall', // showall, onelevel, twolevel, breadcrumb
    'ulAttributes' => " class='dropdown' ", // add html attributes to <ul> tags
    'ulAttributesCallback' => 'customMenuUlAttr', // ADVANCED: custom function to return ul attributes, eg: myUlAttr($category);
    'liAttributesCallback' => 'customMenuLiAttr', // ADVANCED: custom function to return li attributes, eg: myLiAttr($category);
    'ignoreHidden' => true, // don't hide records with hidden flag set
    'useSeoUrls' => true,
  ));

  // customMenuUlAttr
  function customMenuUlAttr($category) {
    $id = "id{$category['num']}";
    $class = "depth{$category['depth']}";
    return "class='$class'";
  }


  // customMenuLiAttr
  function customMenuLiAttr($category) {
    $id = "id{$category['num']}";
    $class = "clickable depth{$category['depth']}";
    if ($category['depth'] < 1) { $class .= " isTop"; }
    if ($category['depth'] > 0) { $class .= " isChild"; }
    if ($category['_isSelectedBranch']) { $class .= " isSelectedBranch"; }
    if ($category['_isSelected']) { $class .= " isSelected"; }
    if ($category['_isChildSelected']) { $class .= " childSelected"; }
    if ($category['_hasChild']) { $class .= " hasChild"; }
    return "class='$id $class'";
  }

Now you can simply add if statements for any of these fields to add classes:

_isSelected
_isAncestorSelected
_isDescendantSelected
_isSelectedBranch
_isBreadcrumb
_hasParent
_hasChild
_isFirstChild
_isLastChild
_hasSiblings
_isSiblingSelected
_isParentSelected
_isChildSelected

-aev-