expand/collapse in menu proxy

[fvila]

Is there any way of achieving expand/collapse in a skinless output using a menu proxy, to obtain a result similar to tripane's?

[Nita Beck]

Many of us as asking a similar question. Unfortunately, this is not possible with Flare out of the box. For the time being, you'll need to do a fair amount of customization.

Forum MVP Dave Lee has led the charge in figuring out how to use Foundation classes and scripts to achieve all kinds of customizations.I hope he weighs in on your question.

Forum member Craig Wright commissioned Dave to help him achieve accordion menus. Giving well-deserved kudos to Dave, Craig is currently putting together a series of blog articles explaining how he (they) did it. The first article is here: http://straygoat-technicalauthor.co.uk/ ... -part-one/.

Hope this helps.

[fvila]

Thanks Nita, I'll look up the link!

[NorthEast]

Yep, it's certainly not possible using Flare out-of-the-box.

The Flare menu proxy generates a list of links, so it's possible (using a bit of scripting) to then style that list as a menu using a third-party plugin such as Foundation, Bootstrap, Smartmenus, etc.

I posted an example using Smartmenus and Foundation (v5) in the forums about a year ago.
The recent solution in that link (which I worked on for Craig) styles the menu proxy as a Foundation (v6) accordion menu.

[fvila]

Here's a script I add in at the end of the masterpage that does what I want it to, based on a context=false menu
The idea is to close all but the main open the part of the TOC relating to the branch where the <a class="selected"> item appears
in css: (to hide anything below level 1 in the TOC, only showing Installation guide - User guide - etc

ul.mc-component li li {
display: none;
}

in script:

$(document).ready(
function(){
selItem = $(".selected");
// avoid having several pages open if the same page appears several times in the TOC
if (selItem.length >1)
{
for ( i=0; i< selItem.length ;i++)
{
var localGuideTitle = $(selItem).parent().parent().parent().children(":first").html();
console.log("localGuideTitle="+ localGuideTitle);
console.log("getGuide()="+ getGuide());
console.log(localGuideTitle == getGuide());
if (localGuideTitle==getGuide())
{
// alert('bingo!');
// alert($(selItem)).html();
// choose this selected item as THE selected item
selItem = $(selItem);
console.log("selItem="+selItem);
}
}
}

selParents = selItem.parents("li")
selParents.show();
selItem.parent().parent().children().show();
selItem.parent().children().children().show();
// header.htm and footer.htm are common files placed at the root of the server, containing the common portal header and footer
$("header").load("/header.htm");
$("footer").load("/footer.htm" );
var viewportHeight = $(window).height();
var usefulHeight = $('.TopicContent').height() + $('footer').height();
if ( viewportHeight > usefulHeight)
{
$('footer').css('position', 'fixed');
$('footer').css('bottom', '0');
}


/* $("footer").load("/footer.htm" , function(response, status, xhr) {status == "error" ? alert("Error!!!") : alert("OK") } ); */

}
)



$("ul.mc-component a").click(

function(){
$(this).parent().children().show();
$(this).parent().children().children().toggle();
}
)

$("ul.mc-component > li > a").click(

function(){
$(this).parent().parent().children().children().children().hide();
$(this).parent().show();
$(this).parent().children().children().show();
}
)

/* user clicked on guide */
$("ul.mc-component > li.has-children > a").click(
function(){
var guideName= $(this).html();
setGuide(guideName);
}
)


/* managing local storage variables, persist from one page to another*/
function getGuide(){
var guide ="";
// Détection
if(typeof sessionStorage!='undefined') {
// Récupération de la valeur dans web storage
var g=sessionStorage.getItem('guide');
// Vérification de la présence du compteur
if( g !=null) {
// Si oui, on convertit en nombre entier la chaîne de texte qui fut stockée
guide = g;
}
}
return guide
}


function setGuide(guideName){
sessionStorage.setItem("guide",guideName);
}

[fvila]

Here's a script I added in at the end of the masterpage that does what I want it to, based on a context=false menu
The idea is to close all but the main open the part of the TOC relating to the branch where the <a class="selected"> item appears
in css: (to hide anything below level 1 in the TOC, only showing Installation guide - User guide - etc

Code: Select all

ul.mc-component li li {
    display: none;
}

In the masterpage:

Code: Select all

<MadCap:menuProxy style="mc-toc-depth: -1;mc-context-sensitive: False;mc-include-parent: True;mc-include-siblings: True;mc-include-children: False;" />
...
<script type="text/javascript" src="../Scripts/ssb_script.js">

in ssb_script.js (don't paste it direct into the masterpage, Flare messes up the code):

Code: Select all

$(document).ready(
	function(){
		selItem = $(".selected");
	// avoid having several pages open if the same page appears several times in the TOC
		if (selItem.length >1)
			{
				for ( i=0; i< selItem.length ;i++)
				{
					var localGuideTitle = $(selItem[i]).parent().parent().parent().children(":first").html();
					console.log("localGuideTitle="+ localGuideTitle);
					console.log("getGuide()="+ getGuide());
					console.log(localGuideTitle == getGuide());
					if (localGuideTitle==getGuide())
					{
						// alert('bingo!');
						// alert($(selItem[i])).html();
						// choose this selected item as THE selected item
						selItem = $(selItem[i]);
						console.log("selItem="+selItem);
					}
				}
			}

		selParents = selItem.parents("li")
		selParents.show();
		selItem.parent().parent().children().show();
		selItem.parent().children().children().show();
		// header.htm and footer.htm are common files placed at the root of the server, containing the common portal header and footer
			$("header").load("/header.htm");
		$("footer").load("/footer.htm" ); 
		var viewportHeight = $(window).height();
		var usefulHeight = $('.TopicContent').height() + $('footer').height();
		if ( viewportHeight > usefulHeight)  
		{
			$('footer').css('position', 'fixed');
			$('footer').css('bottom', '0');
		}


		/* $("footer").load("/footer.htm" 		, function(response, status, xhr) {status == "error" ? alert("Error!!!") : alert("OK")	}  ); */
					
	}
	)
	

	
	$("ul.mc-component a").click(

	function(){
		$(this).parent().children().show();
		$(this).parent().children().children().toggle();
	}
	)

	$("ul.mc-component > li > a").click(

	function(){
		$(this).parent().parent().children().children().children().hide();
		$(this).parent().show();
		$(this).parent().children().children().show();
	}
	)
	
	/* user clicked on guide */
	$("ul.mc-component > li.has-children > a").click(
	function(){
		var guideName= $(this).html();
		setGuide(guideName);
	}
	)
	
	
	/* managing local storage variables, persist from one page to another*/
	function getGuide(){
		var guide ="";
// Détection
if(typeof sessionStorage!='undefined') {
  // Récupération de la valeur dans web storage
   var g=sessionStorage.getItem('guide');
  // Vérification de la présence du compteur
  if( g !=null) {
    // Si oui, on convertit en nombre entier la chaîne de texte qui fut stockée
    guide = g;
  } 
} 
return guide
	}
	
	
	function setGuide(guideName){
		sessionStorage.setItem("guide",guideName);
	}

[NorthEast]

You can set up a menu proxy to only show the full path (in the TOC) which contains the current topic, and hide all other branches.

For example:

(1) Insert a menu proxy in the master page, and don't set it to be Context sensitive.

(2) Just before the end of the body section in the master page, add:

Code: Select all

<script type="text/javascript">/*<![CDATA[*/
	$(document).ready(function() {

		$(".menu[class*=_Skins] .selected").parents("ul").addClass("is-active");
	
		$(".menu[class*=_Skins] .selected").parent("li").children().addClass("is-active");
	
	});
/*]]>*/</script>

(3) Then in your stylesheet, add:

Code: Select all

.menu[class*=_Skins] ul.sub-menu 
{
	display: none;
}

.menu[class*=_Skins] .is-active
{
	display: block !important;
}

[asbahr+]

HI David,

Did you ever figure out how to do this in Flare 2017 r3?

I am not much of an expert at CSS or js and I am struggling to fix my side menu. Your code worked beautifully in the prior version of Flare and now I just get the three parent nodes, they don't expand, and I can't see the children at all.

Any help would be greatly appreciated.

Ana

[NorthEast]

MadCap added a jQuery "loaded" event in 2017r3, so that you could tell when the menu has finished loading.
See - http://kb.madcapsoftware.com/Content/Mi ... _Menus.htm

So it should work if you run your own scripts when this loaded event has been triggered.

[asbahr+]

Dave,

A thousand times Thank You!!!

The KB was exactly the missing piece of the puzzle. You have saved me a huge amount of time and agony. If you are ever in NH, I owe you a beverage of your choice.

Ana

[JRtechw]

Just iterating thanks for this tip from Dave L and all concerned.

A sticky accordion-style TOC menu in the left hand column and the new in-article heading menu proxy on the right (like Microsoft's knowledge base template) is now fantastic for lateral navigability.

Now all we need is a sticky tileset header for landing pages and we can drop Top Nav for all time.