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:

Re: Turning the menu proxy into an accordion menu

Post by StraygoatWriting »

I'd just like to post a VERY BIG THANK YOU to Dave for his help with this, both on and off the forum. After a bit of tinkering, I now have the accordion menu working with a top-nav skin. Once you get your head around where the styles are applied for the smartmenus, it is pretty easy. I'd post a link to the project, but can't because of a non-disclosure agreement.
tdonovan
Jr. Propeller Head
Posts: 4
Joined: Fri Jan 15, 2016 7:34 am

Re: Turning the menu proxy into an accordion menu

Post by tdonovan »

This solution is just what I was after to present the large TOC demanded by my doc set but give me the frameless layout, etc. But after implementing it I'm noticing that the accordion TOC can momentarily display the underlying li items from the menu proxy. This happens when reloading the page after a TOC entry is clicked. Although some of this is just latency inherent with help posted online, I can also see it on my local copy in Chrome more so than Firefox. I am curious if anyone has suggestions on if this refresh/redraw behavior can be remedied somewhat. Also, has anyone tried out SmartMenus jQuery v1.0.0 with David's modifications?
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 »

Since then, I have experienced a couple of problems with the smartmenu solution:

1. The ul from the menu proxy loading as a plain list first, then resetting, as you describe (chrome).
2. The menu doesn't expand properly when you select a sub-option and the page loads.

Problem 1 is Chrome related and Dave Lee might have a solution for this (Note for Dave - it is the same problem you experienced when creating the foundation menu solution).

Problem 2 only happens when smartmenus is used in conjunction with a skin (happened for me with Top-Nav). I suspect there is a conflict between smartmenus and foundation, which is used by the Top-Nav skin.

Dave's done some work for me and has come up with a foundation based solution which works well. I've posted a couple of blogs about it http://straygoat-technicalauthor.co.uk/ ... -part-one/ and will be adding more in the next few weeks. I've not gotten to the juicy parts of it yet. And I might not understand it as well as I should!
tdonovan
Jr. Propeller Head
Posts: 4
Joined: Fri Jan 15, 2016 7:34 am

Re: Turning the menu proxy into an accordion menu

Post by tdonovan »

I also have another problem, and although it doesn't sound exactly the same as your problem #2, I suspect the root cause is the same. When selecting a child TOC entry that leads to a bookmark in an already-loaded topic, it drops off the header divs from the page, which reduces users' navigation options. Again, this is most noticeable in Chrome and IE, not as much in Firefox.
Your blog posts look great. I'll pour through them and see if the Foundation solution might do the trick for me. Unfortunately, some fast approaching product releases might make the attempt too much of a challenge right now.
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 »

Hopefully, by the time your next publishing deadline comes around, I'll have written up the rest of it. I'm hoping on writing some more next week, but depends on work commitments.
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 »

tdonovan wrote:This solution is just what I was after to present the large TOC demanded by my doc set but give me the frameless layout, etc. But after implementing it I'm noticing that the accordion TOC can momentarily display the underlying li items from the menu proxy. This happens when reloading the page after a TOC entry is clicked. Although some of this is just latency inherent with help posted online, I can also see it on my local copy in Chrome more so than Firefox. I am curious if anyone has suggestions on if this refresh/redraw behavior can be remedied somewhat. Also, has anyone tried out SmartMenus jQuery v1.0.0 with David's modifications?
Which solution are you referring to - Smartmenus or Foundation?

I've just recently implemented the Foundation (v6) accordion menu in a solution for Craig (StraygoatWriting).
I noticed a 'Flash of Unstyled Content' (commonly referred to as FOUC) problem with Chrome especially, where you could initially see the unstyled list. To fix this, I initially hide the menu by setting it to display:none in the CSS. The script processes the menu (adding styles etc), then shows the menu by setting it to display:block, just before it runs Foundation which formats it as the accordion menu.

There are various ways to do this, searching for 'FOUC' (in conjunction with the framework/menu) might give you some other ideas.
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 think Dave's solution to the menu being shown unformatted might also work for the smartmenus solution (when used with a skin). It is the same problem, and the skin uses foundation, so maybe the fix works for both?
tdonovan
Jr. Propeller Head
Posts: 4
Joined: Fri Jan 15, 2016 7:34 am

Re: Turning the menu proxy into an accordion menu

Post by tdonovan »

I've only tried the SmartMenus solution so far. And the 'FOUC' that Dave mentions definitely occurs in my project with its very large TOC.
I guess I could attempt to modify the display of the menu and the script that then processes it. But I'd probably have to ask for explicit instructions to modify Dave's original SmartMenu example project avoid botching it up.
Still, it would be good to keep the top-nav skin to get the hamburger menu to appear if the window gets sized down. And the Foundation solution sounds like it might address the other display issue I mentioned that I'm having, which might be related to the top-nav skin. So I find myself eagerly awaiting Craig's next blog 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 »

It'll be this week, all things being well.
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 »

tdonovan wrote:I've only tried the SmartMenus solution so far. And the 'FOUC' that Dave mentions definitely occurs in my project with its very large TOC.
I guess I could attempt to modify the display of the menu and the script that then processes it. But I'd probably have to ask for explicit instructions to modify Dave's original SmartMenu example project avoid botching it up.
Still, it would be good to keep the top-nav skin to get the hamburger menu to appear if the window gets sized down. And the Foundation solution sounds like it might address the other display issue I mentioned that I'm having, which might be related to the top-nav skin. So I find myself eagerly awaiting Craig's next blog post...
The Smartmenus and Foundation examples I put up were always intended to be used instead of the top nav skin, not alongside it.

If you want a hamburger menu with smartmenus then you can - as in this old example: http://www.ukauthor.esy.es/SmartmenusMenuProxy/Smartmenus responsive/Default.htm

The FOUC problem exists in Foundation too, which is why I had to fix it.
It can probably be fixed for Smartmenus in the same way as I described - i.e. set the menu's container to display:none in the CSS, then in your script set it back to display: block:

Code: Select all

$("#yourmenu").css("display", "block");
tdonovan
Jr. Propeller Head
Posts: 4
Joined: Fri Jan 15, 2016 7:34 am

Re: Turning the menu proxy into an accordion menu

Post by tdonovan »

Sorry. I should have given some more details about my project... I was using SmartMenus accordion for the fixed expanding TOC to the left (like Tri Pane). I was not using the Responsive example, but then I contracted some of the work out, and the contractor applied the top nav skin for a combination Smart Menus Accordion/Top Nav project. It seemed to work well until I lived with it for a while and started to experience the FOUC problem and some linking problems.
So at this point I'd like to try the Foundation solution to see if it will provide all the pieces I'd like.
Thanks guys.
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 »

tdonovan wrote:Sorry. I should have given some more details about my project... I was using SmartMenus accordion for the fixed expanding TOC to the left (like Tri Pane). I was not using the Responsive example, but then I contracted some of the work out, and the contractor applied the top nav skin for a combination Smart Menus Accordion/Top Nav project. It seemed to work well until I lived with it for a while and started to experience the FOUC problem and some linking problems.
So at this point I'd like to try the Foundation solution to see if it will provide all the pieces I'd like.
Thanks guys.
The Foundation v6 solution I worked on (for Craig) isn't documented or published, so I can't just point you at the solution.

Why not just try and fix the FOUC issue with Smartmenus? It's only one line in your CSS and one line in the script.
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 think the FOUC is one of many evils with the smartmenus solution (only when it is used with the skin - your skinless version works fine Dave). There are expand and link issues with the smartmenus when used with the top nav skin. It took me a long while to experience them, but they are there.

Patience, people. I will get around to doing the master page part this week, then it will just be the script and customisations after that.
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 »

Craig, Dave, I finally got a chance today to try out these techniques. Craig, I'm following your blog articles Part 1 - 4, and I'm most definitely going skinless. But I'm definitely seeing the FOUC flashing with my accordion menus -- BAD, too. I've got a very, very long TOC, with much nesting, and I see it first with its original styling and overlapping the topic content before it then "collapses" into the accordion menu with its styling. Still, I'm just experimenting, and I'll patiently await your upcoming articles.
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 »

Hi Nita,

Have you got the 'display' part of the script in place? That is what stops the FOUC from happening.
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 »

For those of you who would like to use smartmenus with the top-nav instead of the foundation menu alternative, the following answers were just added to my question on the smartmenus forum:
@straygoat From what I can see, the menu seems to work as intended (apart from the styling which needs some tweaking):

http://straygoat-technicalauthor.co.uk/ ... /Doors.htm

I guess what bothers you is that when a new page is loaded, the menu is not expanded automatically to show the current selected item. To fix that, you would need to change the following code in "Resources/smartmenus-1.0.0-beta1/initialise-accordion.js":

/* Automatically open the accordion to show the current item */
$('#smartmenu-accordion>ul.sm').smartmenus('itemActivate', $('a.selected'));

to something like this:

/* Automatically open the accordion to show the current item */
$('#smartmenu-accordion>ul.sm').smartmenus('itemActivate', $('#smartmenu-accordion>ul.sm a.current'));

Please let me know if that still doesn't solve the issue.
I haven't tried it yet, but will take a look later this week.
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 »

StraygoatWriting wrote:Have you got the 'display' part of the script in place? That is what stops the FOUC from happening.
Definitely. But still get the horrible "flash". I'll check the script again, though, as soon as I get a chance. I found that when I copied code out of your article, I had to edit it by hand; for example, the quotation marks came in weird and I had to replace them all; and sometimes there were extra spaces, such as in the bit ("display", "block"), for which there was a space before the letter b. I will go back and make sure that both the master page and the script don't have anything wonky in them.
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 »

That's probably bits of junk from the Wordpress WYSIWYG editor. If you send me your email address via LinkedIn, I will send you the actual script file. I am going to make the whole project available as a download as long as Dave is okay with that. I wanted to wait until a later part of the project for that - my thinking is that I want to get the information about what is going on out there first, so that when people do play with the project, they have something to refer back to. Dave has commented it all really well, but it might not be enough if you don't already know about Foundation and everything else Dave explained to me via Skype. There's a method in my madness, I hope.
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've updated the blog post to include a download of the script.
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 »

Just to let everyone know - I have tried the smartmenus alteration mentioned above and on the smartmenus forum and can confirm it works. I'm going to persevere with the foundation menu solution.
vsunder
Jr. Propeller Head
Posts: 7
Joined: Wed Aug 13, 2014 4:18 pm
Location: Sydney, Australia

Re: Turning the menu proxy into an accordion menu

Post by vsunder »

Hello Dave,

We are currently in the process of coming up with a new frameless layout for our help system. I followed this post on implementing smartmenus. It works very well. Thanks for the detailed instructions.
However, I can see only h1, h2 and h3 in the dropdown menus. I've tried playing with the proxy menu settings, but cannot get the menus to display h4 level headings. I tried changing the mc-toc-depth, but that doesn't seem to be doing anything.

Any pointers?

Thanks!

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

vsunder wrote:Hello Dave,

We are currently in the process of coming up with a new frameless layout for our help system. I followed this post on implementing smartmenus. It works very well. Thanks for the detailed instructions.
However, I can see only h1, h2 and h3 in the dropdown menus. I've tried playing with the proxy menu settings, but cannot get the menus to display h4 level headings. I tried changing the mc-toc-depth, but that doesn't seem to be doing anything.

Any pointers?

Thanks!

Vid
This thread has two solutions on implementing smartmenus - one that I posted in 2015, and one that straygoat posted in 2016.
Which one are you talking about?

The menu proxy will include the topics that are in your TOC file - i.e. the TOC that you edit in Project Organizer.
Make sure the menu proxy is not set to Context sensitive.

So the heading levels h1, h2, etc. do not matter, or the mc-toc-depth, you don't even need any headings in your topics.
vsunder
Jr. Propeller Head
Posts: 7
Joined: Wed Aug 13, 2014 4:18 pm
Location: Sydney, Australia

Re: Turning the menu proxy into an accordion menu

Post by vsunder »

Hello Dave,

I used your method for implementing Smartmenus. Have changed mc-context-sensitive to false, but no luck. I can only see 3 levels of TOCs.

Regards
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'm not sure why it's not working then.

My menu proxy has Context sensitive off, and depth All.

Or in the HTML:

Code: Select all

mc-toc-depth: -1;mc-context-sensitive: False;mc-include-parent: True;mc-include-siblings: True;mc-include-children: True;
vsunder
Jr. Propeller Head
Posts: 7
Joined: Wed Aug 13, 2014 4:18 pm
Location: Sydney, Australia

Re: Turning the menu proxy into an accordion menu

Post by vsunder »

Thanks Dave. That's exactly what I have as well. Deleting the menu proxy and inserting it into the master page again also did not help.

Vid
Post Reply