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

Re: Turning the menu proxy into an accordion menu

Postby Rona Kwestel on Fri Nov 10, 2017 11:02 am

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: 186
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Postby Rona Kwestel on Fri Nov 10, 2017 2:01 pm

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.
Rona Kwestel
Sr. Propeller Head
 
Posts: 186
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Postby Dave Lee on Sat Nov 11, 2017 12:15 am

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!
Dave Lee
Master Propellus Maximus
 
Posts: 5197
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Turning the menu proxy into an accordion menu

Postby Rona Kwestel on Sat Nov 11, 2017 8:51 am

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.
Rona Kwestel
Sr. Propeller Head
 
Posts: 186
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Postby jcollins on Tue Nov 21, 2017 4:50 pm

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!
jcollins
Propeller Head
 
Posts: 17
Joined: Tue Feb 01, 2011 1:00 pm

Re: Turning the menu proxy into an accordion menu

Postby Rona Kwestel on Fri Nov 24, 2017 9:23 am

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!
Rona Kwestel
Sr. Propeller Head
 
Posts: 186
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Postby tk-powerplan on Fri Dec 22, 2017 10:17 am

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

Postby tk-powerplan on Wed Dec 27, 2017 10:37 am

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

Postby tk-powerplan on Wed Dec 27, 2017 10:46 am

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.
tk-powerplan
Jr. Propeller Head
 
Posts: 5
Joined: Thu Dec 21, 2017 1:53 pm

Re: Turning the menu proxy into an accordion menu

Postby Dave Lee on Thu Dec 28, 2017 12:44 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5197
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Turning the menu proxy into an accordion menu

Postby tk-powerplan on Thu Dec 28, 2017 9:24 am

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

Postby tk-powerplan on Mon Jan 29, 2018 12:12 pm

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.
tk-powerplan
Jr. Propeller Head
 
Posts: 5
Joined: Thu Dec 21, 2017 1:53 pm

Re: Turning the menu proxy into an accordion menu

Postby Dave Lee on Tue Jan 30, 2018 3:09 am

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
Dave Lee
Master Propellus Maximus
 
Posts: 5197
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Turning the menu proxy into an accordion menu

Postby Rona Kwestel on Tue Jun 12, 2018 11:02 am

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.
Rona Kwestel
Sr. Propeller Head
 
Posts: 186
Joined: Wed Apr 04, 2007 11:50 am

Re: Turning the menu proxy into an accordion menu

Postby ThomsonReuters_Dan on Tue Jun 12, 2018 11:15 am

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
User avatar
ThomsonReuters_Dan
Propeller Head
 
Posts: 38
Joined: Tue Jan 21, 2014 11:55 am

Re: Turning the menu proxy into an accordion menu

Postby Rona Kwestel on Tue Jun 12, 2018 2:48 pm

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.
Rona Kwestel
Sr. Propeller Head
 
Posts: 186
Joined: Wed Apr 04, 2007 11:50 am

Previous

Return to Web-based Outputs

Who is online

Users browsing this forum: No registered users and 1 guest