TopNav side menu - indicate the parent links

[BedfordWriter]

This seems like a basic thing, so apologies if I've missed it in the help or another post.

I'm looking for a way to indicate which items in my side menu contain child topics. Automatically.
For example, this shot of a menu from the Flare help file...

SideMenu.png

... would look better if it indicated that Features had more topics...

SideMenuNew.png

I'd be happy with a simple angle bracket or bold. Before I start hacking, has anyone done this?

[NorthEast]

I'm pretty sure you can't do this using the skin alone.

You can choose how many child levels to display (Levels to show (depth)) in the menu, however there's no skin style to indicate which items have more children (that aren't displayed).

There's also nothing to indicate this in the output HTML (e.g. a class or property), so you couldn't attach your own style.

[rogersm]

Yes, it would definitely be great if there was a way for an item in the side menu to indicate if it had child topics, especially if you have a lot of content in your project. If you figure out a way of doing it, please update this thread.
Would it even help if (in your example), the child topics displayed when you rolled your mouse over the Features item? Although, not sure if that is even possible.

[BedfordWriter]

Feature request submitted. Meanwhile, I'm working on a hack that involves a bit of pre-build menu processing. Will post an update...

[BedfordWriter]

Okay, I've got a hack. I definitely will not win any prizes for quality code but hey, I'm not a programmer. Use the following information at your peril.

I did it using PHP simply because it's a language that I (used to) know how to use. Also, it's free and easy to install. I run the .php file directly from the bin folder.

The hack is that, before compiling, create a TOC for the side menu that is an identical copy of the main menu, but with a symbol added for every item that's a parent. In the HTML master page, edit the side menu proxy to use the side TOC.

The tricky bit was to generate that side TOC (and remember to regenerate it before every build from now on). That's where the code comes in. In the menu file, every entry begins with <TocEntry It will end with either a /> or a </TocEntry> and there may be other random stuff in between. If there's another <TocEntry before the last one ends, then you know that you've got a parent link. So, you just have to add a symbol to that title, then continue.
My php program parses the main TOC, reading each line and looking for the good stuff, as above. It writes (over-writes) the side TOC as it goes, modifying titles as required. I chose an angle bracket, but you can use anything. I found that if I added a space before the symbol, then long titles might wrap. I'd love to find an ascii symbol for an arrow that will translate between the TOC file and HTML, but haven't found one yet.
Anyway, using the Flare sample project as a demo, my menus now look kind of like this:

SideMenuHacked.png

If I were you, I'd wait for MadCap to add the feature, but this might help a few people in the meantime. Definitely experiment with a copy of your project. And, let me know of any improvements you create. Especially if you have a better idea than that angle bracket.

[NorthEast]

You do this an easier way, just using CSS, and without any pre/post-processing.

Set your menu proxy to Include children and show 1 level.

This will display the child topics (which you don't want), but it also means it will indicate (with a has-children class) which topics contain children.

So you could use CSS to:
(1) Show which entries have children; has-children>a
(2) Hide the child entries; has-children>ul.sub-menu

Code: Select all

ul.menu>li.has-children>a::after
{
	content: " (THIS HAS CHILDREN!)";
}

ul.menu>li.has-children>ul.sub-menu
{
	display: none;
}

For reference, your output HTML looks a bit like this:

Code: Select all

<ul class="menu _Skins_Menu">
	<li><a href="Topic1.htm">New entry</a></li>
    <li class="has-children"><a class="selected" href="#">Topic 1</a>
		<ul class="sub-menu">
			<li><a href="Topic1-Child-A.htm">Topic 1 Child A</a></li>
			<li><a href="Topic1-Child-B.htm">Topic 1 Child B</a></li>
		</ul>
    </li>
	<li><a href="Topic2.htm">Topic 2</a></li>
</ul>

[BedfordWriter]

Thanks. I was trying that route, but didn't get quite so far into the nested ul.li.ul structures before giving up.

This seems like it should work, but doesn't quite. I copied your code directly into the main.css file of the sample project and rearranged the menu a bit so that it would have more levels. I set the menu proxy to display two levels to expand the test. The 'Show siblings' option is selected. I tried it with 'Show parent' on and then off.
The result is the following.

• Links and Lists, which definitely has child links, doesn't get the ::after content.
  If I open Links and Lists, the ::after content vanishes from Getting Started.
  None of the links within the currently open topic (Getting Started in this example), whether "has children" or otherwise, are shown. All the children of the current topic need to be visible.

NotThereYet.png

[NorthEast]

Sorry, I was thinking of a full menu - a context sensitive menu will not show child topics of siblings.