Turning the menu proxy into an accordion menu

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Rona Kwestel
Sr. Propeller Head
Posts: 212
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Post by Rona Kwestel »

Oh, I completely forgot that we set the display to 'none' on the #nav-accordion id so that it doesn't display until after the menu is modified by the script. Of course once I change it to 'block', my "This is where the accordion menu would go" paragraph appears, and the page load speed is very acceptable. So it's either Flare's dynamic menu and/or the script that are taking so long.

And that explains why the page first draws itself across all 12 columns and then gets shoved over when the menu shows up - with display set to 'none', that div effectively doesn't exist until we set its display attribute to 'block' in the script. If I put back the menuProxy and comment out the script, the menu is created pretty quickly and there is no need to hide the menu div, so the time lag is being caused by the script.

In fact, if I leave the display set to 'block' in the CSS (instead of 'none' as it was prior to testing) and allow the script to run, the redraw of the 'accordionized' menu is so fast that it almost doesn't matter, and the whole page displays much faster. Maybe having to recalculate the sizing/positioning of all the elements when the display changes from 'none' to 'block' is what was taking too long. In any case, I think my problem is solved. : - )

So, thanks again, Dave, for leading me to the solution!
Rona Kwestel
Sr. Propeller Head
Posts: 212
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Post by Rona Kwestel »

Upon further fiddling after noticing that I could still see a quick flash of styling artifacts from the Menu skin, it turns out that the property you want to use to initially hide and then show the menu after it's been modified is 'visibility', as it allows the element to occupy space without being shown, whereas the 'display' property set to 'none' effectively removes the element as if it didn't exist at all, which is not what you want. So, the CSS looks like this:

Code: Select all

/* Set menus to be initially hidden, to prevent FOUC (flash of unstyled content). The menus can initially appear unformatted before all scripts have run, which was evident in Chrome browser especially. So we hide the menus in the CSS, and then make them visible in the script (do not use the display property to do this!), after they have been manipulated. */
#nav-accordion,
#nav-drilldown
{
  visibility: hidden;
}
And the last entry in the script before initializing Foundation looks like this:

Code: Select all

$("#nav-drilldown, #nav-accordion").css("visibility", "visible");
/* Set menus to be visible. They are initially hidden in the CSS, to prevent FOUC (flash of unstyled content). The menus can initially appear unformatted before all scripts have run, which was evident in Chrome browser especially. So we hide the menus in the CSS, and then make them visible in the script (do not use the display property to do this!), after they have been manipulated. This must come last. */
It's working beautifully now.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Turning the menu proxy into an accordion menu

Post by NorthEast »

Rona Kwestel wrote:It's working beautifully now.
That makes more sense - glad you got it sorted out.

My CSS/JS looks like that - it's full of comments so I don't forget why I did something!
Rona Kwestel
Sr. Propeller Head
Posts: 212
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Post by Rona Kwestel »

Big on commenting myself, but credit for those comments largely goes to Straygoat or you! : - )

And it turns out the slow behavior likely is more connected to our serving the pages from S3, so we need to revisit how we're doing that, but using visibility over display is still the right way to go.
jcollins
Propeller Head
Posts: 22
Joined: Tue Feb 01, 2011 1:00 pm

Re: Turning the menu proxy into an accordion menu

Post by jcollins »

I've been reading through this post (thanks everyone for all the great info!) in hope of finding a way to make the menu proxy collapsible. I tried everything y'all suggested, even downloaded @David Lee's example project, but it doesn't seem to want to work, at least not as I was anticipating. What I'd like to do is have a two-menu help system with a top nav menu and a side, context menu that collapses entries like the old tripane menu (but without the pane like that). Is that what's supposed to happen with this approach.

Thanks in advance for any help!
Rona Kwestel
Sr. Propeller Head
Posts: 212
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Post by Rona Kwestel »

Hi jcollins,

If I'm understanding you correctly, I think to get the context menu as a side accordion menu, all you need to do is swap out the TOC menu in this master page code:

Code: Select all

<div class="grid-x">
    <div class="show-for-medium medium-4 large-3 columns" id="nav-accordion">
        <MadCap:menuProxy data-mc-skin="/Project/Skins/Menu.flskn" mc-linked-toc="/Project/TOCs/OurTOC.fltoc" style="mc-toc-depth: -1;mc-context-sensitive: False;" />
    </div>
    ...
</div>
with the topic heading menu, something like this:

Code: Select all

<div class="grid-x">
    <div class="show-for-medium medium-4 large-3 columns" id="nav-accordion">
        <MadCap:menuProxy style="mc-toc-depth: 3;mc-context-sensitive: True;" data-mc-skin="/Project/Skins/SideMenuFixed.flskn" mc-linked-toc="$topicHeadings" />
    </div>
    ...
</div>
As for the top nav menu, we lost that because Flare was handling that via the skin, which we removed in this solution. I'm not sure if there's a way to use Flare's TOC menu proxy and somehow class it via script to work with Foundation's top bar, but otherwise, you might need to build it manually as shown on the Foundation site. Good luck!
tk-powerplan
Jr. Propeller Head
Posts: 5
Joined: Thu Dec 21, 2017 1:53 pm

Re: Turning the menu proxy into an accordion menu

Post by tk-powerplan »

Dave Lee wrote: For example, I used the following script to detect when the menu proxy, top menu, and off-canvas menu were ready:

Code: Select all

$(document).ready(function(){
       
        $(".menu.mc-component").on("loaded", function () {
            console.log("menu proxy ready!");
        });
       
        $("ul.navigation").on("loaded", function () {
            console.log("top menu ready!");
        });
       
        $(".menu.off-canvas-list").on("loaded", function () {
            console.log("off canvas menu ready!");
        });
});
It appears that "loaded" can be used like this for the other types of menu - although it's not documented.
Hey Dave. New to the forum here. I'm working on a site map (topic index) for my project, powered by the menu proxy:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="3" MadCap:lastHeight="101" MadCap:lastWidth="1076" style="mc-master-page: url('Resources/MasterPages/OtherTopicsNoSideMenu.flmsp');">
    <head><title>All Topics</title>
        <link href="Resources/Stylesheets/toc.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <h1>All Topics</h1>
        <div id="tocmenu">
            <MadCap:menuProxy data-mc-skin="/Project/Skins/SiteMap.flskn" mc-linked-toc="/Project/TOCs/Master.fltoc" style="mc-toc-depth: 4;mc-context-sensitive: False;mc-include-parent: False;mc-include-siblings: True;mc-include-children: True;" />
        </div>
		
		<script>
			
			$(document).ready(function(){
       			
				console.log("Document Ready");
			
				$(".menu.mc-component").on("loaded", function () {
					console.log("menu proxy ready!");
					$("#tocmenu ul.menu").attr("data-accordion-menu", "");
				});
	       
				$("ul.navigation").on("loaded", function () {
					console.log("top menu ready!");
				});
	       
				$(".menu.off-canvas-list").on("loaded", function () {
					console.log("off canvas menu ready!");
				});
			});
			
		</script>
		
    </body>
</html>
The console outputs:

Code: Select all

Document Ready
off canvas menu ready!
top menu ready!
Strangely, only 2 of the 3 'loaded' events are working... The one I need (.menu.mc-component) doesn't work. Would you have any pointers to troubleshoot this issue? Much appreciated!
tk-powerplan
Jr. Propeller Head
Posts: 5
Joined: Thu Dec 21, 2017 1:53 pm

Re: Turning the menu proxy into an accordion menu

Post by tk-powerplan »

After a bunch of trial and error, I found what was causing Flare to get confused... I had some extra parameters in menuProxy that prevented the "loaded" event from being fired.

BEFORE (doesn't work):

Code: Select all

<MadCap:menuProxy data-mc-skin="/Project/Skins/SiteMap.flskn" mc-linked-toc="/Project/TOCs/Master.fltoc" style="mc-toc-depth: 4;mc-context-sensitive: False;mc-include-parent: False;mc-include-siblings: True;mc-include-children: True;" />
AFTER (works):

Code: Select all

<MadCap:menuProxy data-mc-skin="/Project/Skins/SiteMap.flskn" mc-linked-toc="/Project/TOCs/Master.fltoc" style="mc-toc-depth: -1;mc-context-sensitive: False;" />
tk-powerplan
Jr. Propeller Head
Posts: 5
Joined: Thu Dec 21, 2017 1:53 pm

Re: Turning the menu proxy into an accordion menu

Post by tk-powerplan »

So I got the accordion menu working but the submenu toggle option (so that the expand/collapse button is a separate link from the page link) does not work. I found that the new code that allows this is not part of the foundation scripts bundled with Flare 2017 r3 (foundation.6.2.3_custom.js).

Anyone know if there a supported way to update the foundation scripts in Flare?

Thanks in advance.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Turning the menu proxy into an accordion menu

Post by NorthEast »

tk-powerplan wrote:Anyone know if there a supported way to update the foundation scripts in Flare?
If you want to use this approach, then download the Foundation scripts/CSS and add it to your project.
Don't use the version of Foundation included with Flare - i.e. set the target skin to None.
tk-powerplan
Jr. Propeller Head
Posts: 5
Joined: Thu Dec 21, 2017 1:53 pm

Re: Turning the menu proxy into an accordion menu

Post by tk-powerplan »

Dave Lee wrote: If you want to use this approach, then download the Foundation scripts/CSS and add it to your project.
Don't use the version of Foundation included with Flare - i.e. set the target skin to None.
Thanks Dave. You seem to suggest there may be other approaches to enabling the menu toggle...?
tk-powerplan
Jr. Propeller Head
Posts: 5
Joined: Thu Dec 21, 2017 1:53 pm

Re: Turning the menu proxy into an accordion menu

Post by tk-powerplan »

Hi Dave (or anyone else),

Wondering if there's a good solution for the outdated foundation scripts... Turning off the target skin sounds dramatic - wouldn't that affect a lot of things if we have already built up a significant template using the default skin? Correct me if I'm wrong.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Turning the menu proxy into an accordion menu

Post by NorthEast »

tk-powerplan wrote:Hi Dave (or anyone else),

Wondering if there's a good solution for the outdated foundation scripts... Turning off the target skin sounds dramatic - wouldn't that affect a lot of things if we have already built up a significant template using the default skin? Correct me if I'm wrong.
To add your own full version of the Foundation framework, then you need to stop Flare adding it's own custom version of Foundation.
Flare adds the custom version of Foundation to the output if you use a top nav skin.
So to stop Flare adding it's own custom version of Foundation, then you don't use a Top Nav skin (i.e. set to None).

So, yes, you'd lose the top nav skin with its menu bar.
When this was discussed originally (a few years ago), I used scripts to generate the top menu from a menu proxy. This works in the same way as the accordion menu - the script modifies the menu proxy markup to use Foundation classes.
Example here - http://www.ukauthor.esy.es/FoundationMenuProxy/Foundation responsive/Default.htm
Rona Kwestel
Sr. Propeller Head
Posts: 212
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Post by Rona Kwestel »

So now that Flare 2018 supports the side navigation accordion menu, is anyone who implemented this skinless solution going to switch back to Flare's native version? I wonder if it's worth the trouble, and whether it means another round of fiddling with the CSS to get everything working right.
Daniel Lemke
Propeller Head
Posts: 42
Joined: Tue Jan 21, 2014 11:55 am

Re: Turning the menu proxy into an accordion menu

Post by Daniel Lemke »

Rona Kwestel wrote:So now that Flare 2018 supports the side navigation accordion menu, is anyone who implemented this skinless solution going to switch back to Flare's native version? I wonder if it's worth the trouble, and whether it means another round of fiddling with the CSS to get everything working right.
I never fully implemented the solution from this thread, but did build a skinless output with a non-collapsing side menu.
I switched to Flare's side-nav skin without too much trouble. The worst part for me was editing each menu level because I find that part of their skin editor to be tedious and confusing. But I like having a default skin that is fully supported.
Dan Lemke of Thomson Reuters
Image
Rona Kwestel
Sr. Propeller Head
Posts: 212
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Post by Rona Kwestel »

Thanks, Dan.
The worst part for me was editing each menu level because I find that part of their skin editor to be tedious and confusing.
Yes, I recall having issues with that myself, though once you get it set, it's not something you need to keep messing with. Also, I believe the settings cascade down, so unless you change something at a lower level, it will "inherit" the setting at the higher level.
jimgilliam
Propeller Head
Posts: 81
Joined: Tue Jun 04, 2013 9:49 am
Location: Arkansas, U.S.A.

Re: Turning the menu proxy into an accordion menu

Post by jimgilliam »

To this day I find that a simple <p> can often help quite a bit in Flare. ;) :echo:
:flare:
Post Reply