Expand Nav-Tree

[HARP]

As it is, the nav tree seems to have a default "..." when the tree goes over three branches.

I was wondering if there was a way to expand it to include more branches. Or at least a way so the "..." reveals a drop down of the hidden previous boards.

I looked in Layout Templates, and Forum Wrapper. I also looked to see if there was a Plugin for this.
I might be missing something, but all I could see in the Layout editor was this:
{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}
I am not sure what to add to it to add more branches or at least edit the "..." to show what is hidden on hover.

Thank you for your time. If this must be a plugin I would appreciate some assistance on how that would be coded.

EDIT NOTE:
I realize the main forum title in the nav-tree has a full drop down of all the boards and their subs, but I'm interested in something more straight forward.

[Shadow]

I may not be of help, but I am interested in learning this as well.

[gorillaman]

not much help either... but

wondering if we can have the Nav Tree expand upwards , not down?

[Chris]

Warning:

This code no longer works, see this thread for an updated code that addresses changes made to UI

-- 6 June 2021

I haven't put this script through its paces to see if it accounts for unforeseen circumstances but from the little I have seen it does add the missing crumbs back to the navtree

<script>
/* Navtree Weirwood mod - INSTALL IN GLOBAL FOOTER */
$(function () {
	var menu = pb.data('pop_menu_structure');
	var root = menu.menuStructure
	var submenu = null;
	
	$('#nav-tree a:contains(...)').each(function (i, e) {
		if ($(e).attr('itemprop') == 'url' && this.title) {
			$(this).find('span[itemprop="title"]').html(this.title)
		} else if ($(e).hasClass('text pointer')) {
			var restore_crumbs = $();
			var lost_crumbs = $($(e).attr('title').split(/\s\>\s*/))
				.each(function (j, f) {
					submenu = submenu || root[menu.startingMenu];
					restore_crumbs = restore_crumbs.add(
						$('<div />', {
							itempscope : 'itemscope',
							itemtype : 'http://data-vocabulary.org/Breadcrumb'
						}).css({
							display : 'inline-block',
							position : 'relative'
						})
						.append($('<a>', {
								itemprop : 'url',
								href : (function findHREF(smenu) {
									var ret = null;
									$.each(smenu.items, function (x, o) {

										if (o.submenu) {
											if (root[o.submenu].title == f) {
												submenu = root[o.submenu];
												ret = o.href;
												return ret
											} else {
												var r = findHREF(root[o.submenu]);
												if (r) {
													ret = r;
													return r;
												}
											}
										}
									})
									return ret;
								})(submenu)

							}).html(f), $('<span class="menu_arrow"><span></span></span>'))
					)

				});
			if (restore_crumbs.length) {
				$(e).parent('div').replaceWith(restore_crumbs)
			}
		}
	})
})
</script>

It doesn't attempt to modify the dropdowns nor distinguish itself as discrete highlightable sections of the navtree but it does convert the text representation used back into a clickable navtree breadcrumb trail

[kanu]

Chris Thanks. Where do you put this script?

Edit: Nevermind. It looks like it works if I just put it at the top of the forum-wrapper (in the HTML body).

Is there a way to make it so that the original look doesn't visibly load before it switches to the expanded view?

[Scott]

kanu, you may benefit from reading this: How to Tag Members. (Note, you didn't tag Chris in your post above, but another member).

Regarding where to put the script, if you notice at the top of the script is states to put it in the Global Footer. It will work in the Forum Wrapper, but only for that particular theme, whereas the footer will apply to all available themes on the forum.

And to your last question, no. It needs to load the tree before making the modification.