Turning the menu proxy into an accordion menu
-
- Sr. Propeller Head
- Posts: 212
- Joined: Wed Apr 04, 2007 11:50 am
Re: Turning the menu proxy into an accordion menu
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!
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!
-
- Sr. Propeller Head
- Posts: 212
- Joined: Wed Apr 04, 2007 11:50 am
Re: Turning the menu proxy into an accordion menu
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:
And the last entry in the script before initializing Foundation looks like this:
It's working beautifully now.
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;
}
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. */
Re: Turning the menu proxy into an accordion menu
That makes more sense - glad you got it sorted out.Rona Kwestel wrote:It's working beautifully now.
My CSS/JS looks like that - it's full of comments so I don't forget why I did something!
-
- Sr. Propeller Head
- Posts: 212
- Joined: Wed Apr 04, 2007 11:50 am
Re: Turning the menu proxy into an accordion menu
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.
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.
Re: Turning the menu proxy into an accordion menu
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!
Thanks in advance for any help!
-
- Sr. Propeller Head
- Posts: 212
- Joined: Wed Apr 04, 2007 11:50 am
Re: Turning the menu proxy into an accordion menu
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:
with the topic heading menu, something like this:
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!
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>
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>
-
- Jr. Propeller Head
- Posts: 5
- Joined: Thu Dec 21, 2017 1:53 pm
Re: Turning the menu proxy into an accordion menu
Hey Dave. New to the forum here. I'm working on a site map (topic index) for my project, powered by the menu proxy:Dave Lee wrote: For example, I used the following script to detect when the menu proxy, top menu, and off-canvas menu were ready:
It appears that "loaded" can be used like this for the other types of menu - although it's not documented.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!"); }); });
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>
Code: Select all
Document Ready
off canvas menu ready!
top menu ready!
-
- Jr. Propeller Head
- Posts: 5
- Joined: Thu Dec 21, 2017 1:53 pm
Re: Turning the menu proxy into an accordion menu
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):
AFTER (works):
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;" />
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;" />
-
- Jr. Propeller Head
- Posts: 5
- Joined: Thu Dec 21, 2017 1:53 pm
Re: Turning the menu proxy into an accordion menu
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.
Anyone know if there a supported way to update the foundation scripts in Flare?
Thanks in advance.
Re: Turning the menu proxy into an accordion menu
If you want to use this approach, then download the Foundation scripts/CSS and add it to your project.tk-powerplan wrote:Anyone know if there a supported way to update the foundation scripts in Flare?
Don't use the version of Foundation included with Flare - i.e. set the target skin to None.
-
- Jr. Propeller Head
- Posts: 5
- Joined: Thu Dec 21, 2017 1:53 pm
Re: Turning the menu proxy into an accordion menu
Thanks Dave. You seem to suggest there may be other approaches to enabling the menu toggle...?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.
-
- Jr. Propeller Head
- Posts: 5
- Joined: Thu Dec 21, 2017 1:53 pm
Re: Turning the menu proxy into an accordion menu
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.
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.
Re: Turning the menu proxy into an accordion menu
To add your own full version of the Foundation framework, then you need to stop Flare adding it's own custom version of Foundation.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.
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
-
- Sr. Propeller Head
- Posts: 212
- Joined: Wed Apr 04, 2007 11:50 am
Re: Turning the menu proxy into an accordion menu
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.
-
- Propeller Head
- Posts: 42
- Joined: Tue Jan 21, 2014 11:55 am
Re: Turning the menu proxy into an accordion menu
I never fully implemented the solution from this thread, but did build a skinless output with a non-collapsing side menu.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 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
-
- Sr. Propeller Head
- Posts: 212
- Joined: Wed Apr 04, 2007 11:50 am
Re: Turning the menu proxy into an accordion menu
Thanks, Dan.
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.The worst part for me was editing each menu level because I find that part of their skin editor to be tedious and confusing.
-
- Propeller Head
- Posts: 86
- Joined: Tue Jun 04, 2013 9:49 am
- Location: Arkansas, U.S.A.
Re: Turning the menu proxy into an accordion menu
To this day I find that a simple <p> can often help quite a bit in Flare.