Need Help with a Category Menu styling problem please

3 posts by 2 authors in: Forums > CMS Builder
Last Post: July 22, 2011   (RSS)

By davidcmsb - July 22, 2011 - edited: July 22, 2011

Hi,

I'd appreciate help with this problem I'm trying to solve now about category menu styling.

By "category menu" I mean the list of links to categories that you can make appear on the web page you're designing.

I'm working on a vertical navigation menu, that is generated by CMSB and outputs a vertical list of links to the CMSB categories.

I want to make bold the selected category menu item link, and also make bold all of the ancestor parents of the selected category. In other words, I want to make the link to the category that is the current selected category appear in bold, and, also have all its ancestor links appear in bold too. I also want to do this in conjunction with having parent items in the category menu get rendered as null links. I've tried many code permutations and searched this forum to no avail.

Before explaining further, here's the base code I'm working off of and modifying to try to do the above is this code found in this forum:
<ul>
<li><a href="?">(All Articles)</a></li>
<?php foreach ($categoriesRecords as $categoryRecord): ?>
<?php echo $categoryRecord['_listItemStart'] ?>
<?php if ($categoryRecord['_isSelected']): ?> <b> <?php endif ?>
<a href="?category=<?php echo $categoryRecord['num'] ?>"><?php echo $categoryRecord['name'] ?></a>
<?php if ($categoryRecord['_isSelected']): ?> </b> <?php endif ?>
<?php echo $categoryRecord['_listItemEnd'] ?>
<?php endforeach ?>
</ul>


So, I was able to use and adapt this base code to have CMSB generate null links for the parent items, using the code shown below. The reason I wanted to learn how to do this is I think users will not realize that menu items that spawn drop downs that end in links are themselves clickable links, and to the user these type of menu items are more like headings rather than clickable menu links. This seems especially true with hover menus. So, I want any item in the category menu that is also a parent to just be a null link. Here's the code I used to do this:

<ul>
<li><a href="?">(All Articles)</a></li>
<?php foreach ($categoriesRecords as $categoryRecord): ?>
<?php echo $categoryRecord['_listItemStart'] ?>
<?php if ($categoryRecord['_hasChild']): ?>
<a href="#"><?php echo $categoryRecord['name'] ?></a>
<?php else: ?>
<?php if ($categoryRecord['_isSelected']): ?> <b> <?php endif ?>
<a href="?category=<?php echo $categoryRecord['num'] ?>"><?php echo $categoryRecord['name'] ?></a>
<?php if ($categoryRecord['_isSelected']): ?> </b> <?php endif ?>
<?php endif ?>
<?php echo $categoryRecord['_listItemEnd'] ?>
<?php endforeach ?>
</ul>


That works great, and if a category item is a parent of other submenu items, the link for the parent item gets generated as a null link so it acts only as a text heading that's not a link. This way, the menu item acts, as desired, only as a heading about the sub menu items it spawns and itself is not a clickable link since I don't want menu items that act as headings for sub items to have links attached to them.

OK, then, after getting the above right I wanted to also modify the base menu code I'm using to also make in bold the selected sub (or sub-sub) category menu item that is the currently selected one PLUS also all of its parent ancestors (and their parent ancestors). The base code I'm using does put in bold the link to the current selected category but not all its ancestors.

So I was able to modify the base code I'm working off to make the link to the selected category and all its ancestors appear in bold AND generate a null link for the ancestors of the selected category menu link, using this code:
<ul>
<li><a href="?">(All Articles)</a></li>
<?php foreach ($categoriesRecords as $categoryRecord): ?>
<?php echo $categoryRecord['_listItemStart'] ?>
<?php if ($categoryRecord['_isDescendantSelected']): ?>
<b> <a href="#"><?php echo $categoryRecord['name'] ?></a> </b>
<?php else: ?>
<?php if ($categoryRecord['_isSelected']): ?> <b> <?php endif ?>
<a href="?category=<?php echo $categoryRecord['num'] ?>"><?php echo $categoryRecord['name'] ?></a>
<?php if ($categoryRecord['_isSelected']): ?> </b> <?php endif ?>
<?php endif ?>
<?php echo $categoryRecord['_listItemEnd'] ?>
<?php endforeach ?>
</ul>


BUT, here's where I'm at a dead end and need help. I can't seem to make BOTH things happen, i.e., [1] have links to category menu items that have sub items get generated as null (i.e.,#) links, AND ALSO [2] have all ancestor menu items of the selected category menu item appear in bold. In other words, I can't find a way to combine both. I can get it to do either 1 or 2 (as shown above) but can't find the code that does the trick to do both.

I have tried the following code but it does not work in the sense that the parent menu items get generated with a null # link only if one of its descendants is selected. If a parent menu item's sub child menu items are not selected, it will generate the regular category url link. But what I want is (1) a category menu item that's a parent item should have a null # link, and (2) if a submenu item is the selected category, it AND all of its ancestors should appear in bold.

I had thought that if I somehow could combine two conditions in an IF statement that might be an approach, i.e., IF item has descendants AND item's descendant is selected, THEN generate null link and make it bold if a descendant is selected. But even writing this out now I can see that this logic is not right. Here's the code I tried but can't get to work to do both things:

<ul>
<li><a href="?">(All Articles)</a></li>
<?php foreach ($categoriesRecords as $categoryRecord): ?>
<?php echo $categoryRecord['_listItemStart'] ?>
<?php if ($categoryRecord['_hasChild'] && $categoryRecord['_isDescendantSelected']): ?>
<b> <a href="#"><?php echo $categoryRecord['name'] ?></a> </b>
<?php else: ?>
<?php if ($categoryRecord['_isSelected']): ?> <b> <?php endif ?>
<a href="?category=<?php echo $categoryRecord['num'] ?>"><?php echo $categoryRecord['name'] ?></a>
<?php if ($categoryRecord['_isSelected']): ?> </b> <?php endif ?>
<?php endif ?>
<?php echo $categoryRecord['_listItemEnd'] ?>
<?php endforeach ?>
</ul>


So I'd very much appreciate if anyone could supply the code I could use so that each of these things will happen:

1. A category menu item that's a parent item should always have a null # link.

2. If a submenu item is the selected category, it AND all of its ancestors should appear in bold.

Thank you very much!

Re: [davidcmsb] Need Help with a Category Menu styling problem please

By davidcmsb - July 22, 2011

Follow up -- Eureka, with a little more fiddling I got it to work, using this code:

<ul>
<li><a href="?">(All Articles)</a></li>

<?php foreach ($categoriesRecords as $categoryRecord): ?>
<?php echo $categoryRecord['_listItemStart'] ?>
<?php if ($categoryRecord['_hasChild'] && $categoryRecord['_isDescendantSelected']): ?>
<b><a href="#"><?php echo $categoryRecord['name'] ?></a></b>

<?php elseif ($categoryRecord['_hasChild']): ?>
<a href="#"><?php echo $categoryRecord['name'] ?></a>

<?php else: ?>

<?php if ($categoryRecord['_isSelected']): ?> <b> <?php endif ?>
<a href="?category=<?php echo $categoryRecord['num'] ?>"><?php echo $categoryRecord['name'] ?></a>
<?php if ($categoryRecord['_isSelected']): ?> </b><?php endif ?>

<?php endif ?>

<?php echo $categoryRecord['_listItemEnd'] ?>

<?php endforeach ?>

</ul>


I figured out that I needed to use an elseif, and structure it this way, with the most specific condition as the first IF, and then the more general as the ELSEIF, before then going on to everything else, i.e., [1] IF category menu item has a child and if a descendant is selected, then output null link and wrap in bold tag, or [2] ELSEIF category menu item has a child then output null link, otherwise [3] output the links and add bold tags if the item is the selected category.

So, I did get it working and thought I'd post this in case anyone thinks this is no good or there are better ways to do it. (Still haven't figured out the answer to what I posted about in my other post, about wrapping a <div> tag around the <ul> tags that CMSB adds around submenu items, so if anyone has any ideas, here is the link -- http://www.interactivetools.com/iforum/Products_C2/CMS_Builder_F35/How_to_have_%3Cdiv%3E_added_in_%3Cul%3E_category_menu_link_list_generated_by_CMSB_generated_P89145/)