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
StraygoatWriting
Sr. Propeller Head
Posts: 125
Joined: Thu Mar 05, 2015 4:24 am
Location: Chesterfield, Derbyshire, UK
Contact:

Turning the menu proxy into an accordion menu

Post by StraygoatWriting »

One thing my clients always ask for, but Flare doesn't provide, is an accordion menu for the toc. Basically, all they want is the functionality of the toc from the tri-pane layout, but with the look and feel of a modern java/css menu. I managed to get a developer to write a script that works/doesn't work depending on certain things, but we can't figure out why. Here is what we achieved:

If toc items that have children (let's call them books) do not have a link, the accordion menu works great. But the mobile menu is empty, as it needs all toc items to have a link

if books have links, the mobilr mrnu works but the accordion menu doesn't - selecting a book-level item only opens the link to that page and does not expand the accordion menu to reveal its sub-menu.

Does anyone have any ideas as to what is causing the conflict? The developer has shown me the menu working fine outside of Flare and he says that it doesn't matter whether the book links are there or not - the script handles that. I have to take his word for it as I don't know javascript anywhere near well enough.
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 »

StraygoatWriting wrote:if books have links, the mobilr mrnu works but the accordion menu doesn't - selecting a book-level item only opens the link to that page and does not expand the accordion menu to reveal its sub-menu.

Does anyone have any ideas as to what is causing the conflict? The developer has shown me the menu working fine outside of Flare and he says that it doesn't matter whether the book links are there or not - the script handles that. I have to take his word for it as I don't know javascript anywhere near well enough.
I'd question how it is supposed to work, as the problem clearly seems related to how a click is handled on an accordion 'book'. If you think about it, is clicking on that a 'book' item supposed to open that accordion book or navigate to the linked topic?

What you're suggesting is that it should do both, but that means you have to navigate to a new page just to open/close an accordion - which I would have thought would make the control a bit unusable.

Usually you would need a separate clickable control to open/close the accordion, like a '+' or '-' icon.
StraygoatWriting
Sr. Propeller Head
Posts: 125
Joined: Thu Mar 05, 2015 4:24 am
Location: Chesterfield, Derbyshire, UK
Contact:

Re: Turning the menu proxy into an accordion menu

Post by StraygoatWriting »

Hi Dave,

The developer has allowed for this, and yes, there are + and - icons. Originally, he made it so that clicking on the book did both the link and the expand, but that required the page to reload, which was a bit flickery and ugly. So what I asked him to do was get the script to ignore the links for the book items and just expand/collapse the menu. This works fine outside of Flare, but not in it. I suspect that the developer has messed up somewhere, but he insists it is something in Flare affecting how it runs, because it works right with normal web content. To be fair to him, he has shown me that it works outside Flare.

I'm getting another developer to look at it from fresh over the next few days. If I get a solution that works well, I will share it as I can't be the only person with clients who want an accordion. I've already raised an improvement request ticket with MadCap for it, along with more controls over the menu proxy, the list that is made from the menu proxy, and the mobile menu (which should also be a proxy in my opinion)...if anyone else wants those, please let them know. The more requests made, the more likely it will happen.
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 »

Might be of interest to you, but I've been experimenting with smartmenus, and I can get it to work with Flare's menu proxy.

So what that means is that you can display a menu proxy as a menu/toolbar on large screens, and it'll change to an accordion on small screens. Or you could just have it displayed as an accordion all the time (like you want to do).
smartmenus-menu.png
smartmenus-accordion.png
Anyway, if you're interested, this is how I did it:

1. Downloaded smartmenus:
* website: http://www.smartmenus.org/download/
* download zip: http://www.smartmenus.org/files/?file=s ... -beta1.zip

2. Unzipped to my Content\Resources folder, so it's in Content\Resources\smartmenus-1.0.0-beta1\

3. I set up my master page like this:

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="1196" MadCap:lastWidth="1196">
    <head>
        <link href="Stylesheets/Styles.css" rel="stylesheet" type="text/css" />
        <link href="smartmenus-1.0.0-beta1/css/sm-core-css.css" rel="stylesheet" type="text/css" />
        <link href="smartmenus-1.0.0-beta1/css/sm-mint/sm-mint.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="smartmenu">
            <MadCap:menuProxy mc-linked-toc="/Project/TOCs/Master.fltoc" style="mc-toc-depth: -1;mc-context-sensitive: False;mc-include-parent: True;mc-include-siblings: True;mc-include-children: True;" data-mc-skin="/Project/Skins/Menu.flskn" />
        </div>

        <MadCap:bodyProxy />

        <!-- scripts -->
		<script src="smartmenus-1.0.0-beta1/jquery.smartmenus.js" type="text/javascript">
		</script>	
		<script src="smartmenus-1.0.0-beta1/initialise.js" type="text/javascript">
		</script>
	
    </body>
</html>
4. I created a new script file Content\Resources\smartmenus-1.0.0-beta1\initialise.js, which contains:

Code: Select all

$(document).ready(function() {
		$(function() {
				/* add classes used by smartmenus */		
				$('#smartmenu>ul.menu').addClass("sm sm-mint");
				
				/* remove Flare's "menu" class from menu proxy */
				$('#smartmenu>ul.menu').removeClass("menu");
		
				/* initialise smartmenus */
				$('#smartmenu>ul.sm').smartmenus({
					markCurrentItem: true,
					markCurrentTree: true,
					keepHighlighted: true,	
					keepInViewport: true
				});
		});
});
The script does this:
* Adds smartmenus classes sm and sm-mint (the theme) to Flare's generated menu proxy.
* Removes Flare's menu class, so the menu isn't styled by Flare's CSS.
* Initialises smartmenus options.
You do not have the required permissions to view the files attached to this post.
StraygoatWriting
Sr. Propeller Head
Posts: 125
Joined: Thu Mar 05, 2015 4:24 am
Location: Chesterfield, Derbyshire, UK
Contact:

Re: Turning the menu proxy into an accordion menu

Post by StraygoatWriting »

That's pretty much what I was looking for, Dave - thanks. I only want it to work as an accordion, but can't see why it won't work. I will give it a try on Thursday when I am back on my Flare project and let you know.

If it works out, you have succeeded where 4 different web developers have failed :)
StraygoatWriting
Sr. Propeller Head
Posts: 125
Joined: Thu Mar 05, 2015 4:24 am
Location: Chesterfield, Derbyshire, UK
Contact:

Re: Turning the menu proxy into an accordion menu

Post by StraygoatWriting »

I still think Flare needs to have this as a native feature, though.
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 »

I've also got it working with a Foundation topbar menu, using a similar technique.
foundation-menu.png
You do not have the required permissions to view the files attached to this post.
StraygoatWriting
Sr. Propeller Head
Posts: 125
Joined: Thu Mar 05, 2015 4:24 am
Location: Chesterfield, Derbyshire, UK
Contact:

Re: Turning the menu proxy into an accordion menu

Post by StraygoatWriting »

One thing - does the mobile menu still work when the accordion menu is there? The scripts I had could get the accordion to work fine but it left the mobile menu empty.

I'm looking forward to trying this - it was the last missing piece of the jigsaw for what my client wants.
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 »

StraygoatWriting wrote:That's pretty much what I was looking for, Dave - thanks. I only want it to work as an accordion, but can't see why it won't work. I will give it a try on Thursday when I am back on my Flare project and let you know.

If it works out, you have succeeded where 4 different web developers have failed :)
You could display that smartmenus menu as an accordion all the time, you'd just add that setting to the smartmenus initialisation.

This solution works fine for me, and seems pretty solid.

There are other menu and accordion implementations out there, so you don't need to re-invent the wheel.
All this took me about an hour to figure out, it really shouldn't be that tricky for a professional developer.
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 »

StraygoatWriting wrote:One thing - does the mobile menu still work when the accordion menu is there? The scripts I had could get the accordion to work fine but it left the mobile menu empty.
By "mobile menu", do you mean the responsive top nav menu?

This is the menu proxy , not the top nav menu.
There is no top nav skin in this project.
StraygoatWriting
Sr. Propeller Head
Posts: 125
Joined: Thu Mar 05, 2015 4:24 am
Location: Chesterfield, Derbyshire, UK
Contact:

Re: Turning the menu proxy into an accordion menu

Post by StraygoatWriting »

Believe me, it took all of the developers over a week to get to the point where an accordion menu worked, but it broke the mobile menu. They were all trying to do it with javascript only, so maybe that is where the problem stems from.
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 »

StraygoatWriting wrote:Believe me, it took all of the developers over a week to get to the point where an accordion menu worked, but it broke the mobile menu. They were all trying to do it with javascript only, so maybe that is where the problem stems from.
Why would you want the top nav mobile menu if you have an accordion?
This solution is a mobile friendly way to display the menu as an accordion, instead of having to use the top nav menu (including responsive mode).
StraygoatWriting
Sr. Propeller Head
Posts: 125
Joined: Thu Mar 05, 2015 4:24 am
Location: Chesterfield, Derbyshire, UK
Contact:

Re: Turning the menu proxy into an accordion menu

Post by StraygoatWriting »

Ah, maybe that is an issue then...I am using the top nav skin, but customised so that the top menu doesn't appear and I use a menu proxy in a side bar for a toc instead. So it is kind of like a tri-pane below the top-nav header.

By mobile menu, I mean the menu you get to via the 'hamburger' icon for tablet and phones.

If it is easier to use a skinless layout and then just add the proxies to that, then so be it. But as there is no mobile menu proxy, I guess I'd need to look into how to add that?
StraygoatWriting
Sr. Propeller Head
Posts: 125
Joined: Thu Mar 05, 2015 4:24 am
Location: Chesterfield, Derbyshire, UK
Contact:

Re: Turning the menu proxy into an accordion menu

Post by StraygoatWriting »

We are overlapping here, but this is what the client wanted:

The mobile menu and look and feel of the header from the top nav skin, but without the top nav menu
A tri-pane beneath it, with an accordion menu instead of the traditional book/topic menu. The accordion only appears in desktop view and larger tablets, the mobile menu is used for navigation at other times.
3 footers with various links etc.

So I took the top nav skin, disabled the top nav menu, made the tri-pane and footers in the master page, and then hired the devs to do the accordion. It all went to plan until the accordion.
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 »

StraygoatWriting wrote:Ah, maybe that is an issue then...I am using the top nav skin, but customised so that the top menu doesn't appear and I use a menu proxy in a side bar for a toc instead. So it is kind of like a tri-pane below the top-nav header.

By mobile menu, I mean the menu you get to via the 'hamburger' icon for tablet and phones.

If it is easier to use a skinless layout and then just add the proxies to that, then so be it. But as there is no mobile menu proxy, I guess I'd need to look into how to add that?
I'd intended the example above to be a replacement for using the top nav skin, but using the menu proxy instead.
As mentioned, you can have it as a menu that switches to an accordion (on small screens), or accordion all the time.

It'd also be pretty easy to display the accordion in a side panel (on large screens) so it looks like a tri-pane, and then switch that layout to something more appropriate for small screens. Flare includes foundation, you can use foundation's grid styles to create a responsive layout.
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 »

StraygoatWriting wrote:We are overlapping here, but this is what the client wanted:

The mobile menu and look and feel of the header from the top nav skin, but without the top nav menu
A tri-pane beneath it, with an accordion menu instead of the traditional book/topic menu. The accordion only appears in desktop view and larger tablets, the mobile menu is used for navigation at other times.
3 footers with various links etc.

So I took the top nav skin, disabled the top nav menu, made the tri-pane and footers in the master page, and then hired the devs to do the accordion. It all went to plan until the accordion.
Yep, that's still do-able.

The menu proxy implementation above has no effect on the top nav skin, if you really wanted to use that as well.

Mind, I much prefer the accordion implementation to the top nav 'mobile' menu.
StraygoatWriting
Sr. Propeller Head
Posts: 125
Joined: Thu Mar 05, 2015 4:24 am
Location: Chesterfield, Derbyshire, UK
Contact:

Re: Turning the menu proxy into an accordion menu

Post by StraygoatWriting »

Yeah, I know how to create responsive layouts in CSS so that side of things isn't an issue.

So would your solution definitely not work with a skin?

If it won't work, I could go skinless fairly easily I think, but how would I keep the mobile menu functionality as there is no mobile menu proxy to add to the master page?
StraygoatWriting
Sr. Propeller Head
Posts: 125
Joined: Thu Mar 05, 2015 4:24 am
Location: Chesterfield, Derbyshire, UK
Contact:

Re: Turning the menu proxy into an accordion menu

Post by StraygoatWriting »

Overlapping again! Thanks - if the skin has no effect on your solution, that is going to work for me. I've already done the responsive layout parts for the tri-pane etc and tested it, so it really is just the accordion menu that is needed.

Thanks a lot for the advice, and most of all, the solution.
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 »

There's an example project here for smartmenus:
www.ukauthor.esy.es/SmartmenusMenuProxy/SmartmenusMenuProxy.flprjzip

It has two targets:
* Smartmenus accordion: Displays the TOC as an accordion in your topics.
* Smartmenus reponsive: Displays the TOC as a top menu on large screens, and as an accordion on small screens (toggled via the menu link at the top).

The accordion will also expand to show the selected topic.
StraygoatWriting
Sr. Propeller Head
Posts: 125
Joined: Thu Mar 05, 2015 4:24 am
Location: Chesterfield, Derbyshire, UK
Contact:

Re: Turning the menu proxy into an accordion menu

Post by StraygoatWriting »

Thanks Dave, I will take a look at them. I'll let you know if I run into any problems when using them with skins.
Nita Beck
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Turning the menu proxy into an accordion menu

Post by Nita Beck »

Dave and Straygoat... Thank you both for this long, detailed, and exciting thread. We the Flare community are the beneficiaries of your research and inventiveness. Plus, you guys just landed on the agenda for the upcoming meeting of the Rochester Flare User Group, when we'll be discussing Top Nav *and beyond*!
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
StraygoatWriting
Sr. Propeller Head
Posts: 125
Joined: Thu Mar 05, 2015 4:24 am
Location: Chesterfield, Derbyshire, UK
Contact:

Re: Turning the menu proxy into an accordion menu

Post by StraygoatWriting »

No problem, Nita. If I ever find out why the web devs scripts didn't work but Dave's way of doing it seemingly does, I will let everyone know. The dev has seen Smartmenus and claims his script does exactly the same thing, so it will be interesting to see if it is the top nav skin that is interfering somehow. I will post on here when I have had chance to test it with my project.

Craig
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 »

I've put examples of the two targets here:

* Smartmenus accordion:
http://www.ukauthor.esy.es/SmartmenusMenuProxy/Smartmenus accordion/Default.htm

* Smartmenus reponsive:
http://www.ukauthor.esy.es/SmartmenusMenuProxy/Smartmenus responsive/Default.htm

The styling is still pretty basic, but it shows that you can use a menu proxy with the smartmenus menu.
And of course, you can choose which TOC, and how much of it, is included in the menu proxy.

The same principle can be used to get a menu proxy working with foundation and bootstrap navigation controls - I've already got it working with foundation. I'll do a proper blog article on this when I get time.
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 »

Here's the foundation version too...

* Foundation responsive Top bar menu (fixed)
http://www.ukauthor.esy.es/FoundationMenuProxy/Foundation responsive/Default.htm

If you're wondering why bother, as Flare has a top nav menu that uses foundation, this way means you can add a menu (or menus) at a master page level, and customise it further (http://foundation.zurb.com/docs/components/topbar.html).
StraygoatWriting
Sr. Propeller Head
Posts: 125
Joined: Thu Mar 05, 2015 4:24 am
Location: Chesterfield, Derbyshire, UK
Contact:

Re: Turning the menu proxy into an accordion menu

Post by StraygoatWriting »

I never wonder 'why bother', i just wonder 'what if'...how do you think I end up getting into all this? :)

Thanks again.
Post Reply