Bold Parents, indent Children in Category Menu

Hi there - the easiest way to do this is through CSS style rules, more or less. Bolding is done with font-weight, and indentation is done with margins.

Yes, this much I know. How is it applied to your category code?

<ul class="menu">
                                     <?php foreach ($training_coursesRecords as $listRecord): ?>
      <?php $isSelected = ($listRecord['num'] == $detailRecord['num']); ?>
      <?php if ($isSelected) { print "<b>"; } ?>
      <li><a href="<?php echo htmlencode($listRecord['_link']) ?>"><?php echo htmlencode($listRecord['name']) ?></a></li>
      <?php if ($isSelected) { print "</b>"; } ?>
    <?php endforeach ?>

    <?php if (!$training_coursesRecords): ?>
      No records were found!<br/><br/>
    <?php endif ?>
                                    </ul>

Rather than see the back end code, I'd like to look at how the front end HTML is being rendered. Can you send me a link to the page where the menu appears? I can give you a few simple style rules based on that.

Thanks for the quick response - you can see it here - http://www.hrlegal.com.au/training-courses.php

All of them are parents except for bullets 2-5 - Module A,B, C, & D.

Hello? Do we have any update on this - I'd love to get this sorted out if you have the time.

If you only have 2 levels, parent and one level of children, just apply CSS classes conditionally as such: (using your own variables and CSS classes, of course)

  <?php foreach ($categoryRecords as $categoryRecord): ?>
    <?php $aClass = 'indentclass' // Default to indented class ?>
      <?php if ($categoryRecord['depth'] == 0): // if this is top level ?>
        <?php $aClass = 'boldclass' // Apply bold unendented class ?>
      <?php endif ?>    
    ?>
    <li class = $aClass>
      <!-- Put your link code here -->
    </li>
  <?php endforeach ?>



If you allow more levels, the code gets a bit more complex.  I purchased the Instant Website template some time ago and I have used the code for the accordion menu and modified it to suit different applications.

I hope this points you in the right direction.

Hi benedict,

As Ron pointed out, you can use 'depth' value to determine a category menu record's level.
A parent category record has a depth of "0", it's children's depth is "1", grandchildren will have "2", and so on.

So on your provided code above, you can implement the CSS styling base on the depth by something like this:

<ul class="menu">
  <?php foreach ($training_coursesRecords as $listRecord): ?>
    <?php
    $style = '';
    $style = $listRecord['depth'] == 0 ? 'style = "font-weight: bold;"' : 'style = "padding-left: 20px;"';
    ?>
    <li <?php echo $style; ?>><a href="<?php echo htmlencode($listRecord['_link']) ?>"><?php echo htmlencode($listRecord['name']) ?></a></li>

  <?php endforeach ?>

  <?php if (!$training_coursesRecords): ?>
    No records were found!<br/><br/>
  <?php endif ?>
</ul>

Or instead of in-line CSS, add a CSS class.

I hope this helps!

Cheers,