Bold Parents, indent Children in Category Menu
10 posts by 4 authors in: Forums > CMS Builder
Last Post: March 5, 2015 (RSS)
I can't believe I haven't come across this issue before in CMSB and I am sure there is an easy fix. Anybody know how to bold parents in a category menu and have all children indented?
By claire - February 16, 2015
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.
Claire Ryan
interactivetools.com
Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
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>
By claire - February 16, 2015
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.
Claire Ryan
interactivetools.com
Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Thanks for the quick response - you can see it here - http://www.hrlegal.com.au/training-courses.php
By claire - February 16, 2015
Okay, I can see that the sidebar list appears to be the one you want to format. This includes a title and a list of links that are already indented. Can I confirm which records are the parent records?
Claire Ryan
interactivetools.com
Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
All of them are parents except for bullets 2-5 - Module A,B, C, & D.
By benedict - March 3, 2015
Hello? Do we have any update on this - I'd love to get this sorted out if you have the time.
By rconring - March 4, 2015 - edited: March 4, 2015
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.
Conring Automation Services
----------------------------------------
Software for Business and Industry Since 1987
By Daryl - March 5, 2015
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,
PHP Programmer - interactivetools.com