Hierarchical dropdown navigation

I have a complex menu system on my existing non-responsive websites that were built with an app other than Blocs. I am trying to recreate the same links and menu hierarchy in Blocs, yet in a responsive, modern way. (I’ve not yet considered breakpoints other than LG, since I want to work out the kinks in LG before I ponder reshaping it on tablet and smaller displays.) Here’s my example Blocs 3.2.1 document with just the navigation…

Archive.zip (55.8 KB)

Please open my document and then Preview in Blocs. In Preview, please click “製品” to make the dropdown appear. (I think it might be better to have the dropdown appear above existing content, rather than push down the content, but I don’t know how to implement that. If you know how, I’d love to hear your thoughts.) Note that clicking either the “X” in the upper right of the dropdown or clicking on “製品” again will close the dropdown.

Here’s my question…

I want to add “submenus.” For example, click on the 3rd link below the word “SCIBORG” which is named “RSシリーズ” and then note my “submenu” for that selection appears, replacing the parent dropdown. I’m not sure if that’s the best way to accomplish my aim, so if you have a better idea I’m open to hearing your thoughts. For now though, here’s the problem which is tied to my question. If the user clicks on the “X” in the upper right corner of that “submenu” dropdown, all is well. However, if the user clicks on “製品” (go ahead and try it), the parent dropdown appears and the submenu dropdown is pushed down beneath it. I don’t like that. It looks silly. QUESTION: If the user clicks “製品” while a submenu is displayed, I want the submenu to close (or the parent could be made to appear, but I still want the submenu to be closed at the same time). How do I accomplish this?

Note that to get my dropdowns to work, I am using “Interactions > Toggle Visibility” in the right sidebar in conjunction with the Bloc ID of the dropdowns.

I would appreciate hearing your thoughts, suggestions and ideas.

Many thanks,

James

Well @JDW
I tried. I added jQuery code to Page > Settings > Code button > Footer but it’s not running so I can’t make it work. I don’t know if jQuery is even supported in the page?!

Navi Test 3.bloc.zip (56.6 KB)

I assigned the symbol in nav an id of megamenu1.
Basically, you would have to detect if each main sub-menu is being displayed and if so then hide the submenu. I didn’t get that far because display is undefined, probably due to lack of jQuery support and preview in browser is broken too in 3.2.2 beta2, so I can’t go any further w/ this - sorry.

1 Like

@Bill, a thousand thanks for your kind efforts. I will see what @Norm has to say.

Strange, preview in browser is working fine here and I’ve not had any other reports of that?

Also I don’t think it’s possible to disable jquery, did you look at the inspector for error logs?

The display data attribute how is that added in app?

@Norm
I added footer content at the bottom of the page since the code is added in “Footer” (don’t know if that’s necessary or not) and I also modified Bill’s code to reference the Blocs version of jQuery as follows (not sure if that is allowed):

And here’s the document I modified:

Archive.zip (92.4 KB)

When I export and preview in Safari, I get errors, but they don’t seem to pertain to Bill’s code:

Anyway, what we are trying to do is get the proper code that will close any and all submenus when the menu pulldown trigger (“製品”) is clicked. That part is NOT working.

–James

That code snippet is breaking the page, remove the src=“./js/jquery-3.3.1.min.js” part

So all you have is a clean script tag

Removing that part gives you Bill’s original code, which too does not work. Here’s the document with Bill’s code:

Yes but do you get the tooltip errors?

No. Errors are gone.

Cool, I think bills code may need tweaking but jquery is running. I’ll take a look later, I suspect the attribute is not being targeted correctly.

I’m not a JS or jQuery coder, but it seems right…

$('a#megamenu1').on('click', function() {...

It’s the data attribute portion ‘display’ I’m referring to not the event target.

Seems like Bill’s code is just writing to the browser Console, which is fine when debugging code but doesn’t directly achieve my desired aim. So despite not knowing jQuery (or JS), I managed to hack together this solution, which seems to work well to hide the submenus (if they are displayed) when the primary trigger (“製品”) is clicked.

<script type="text/javascript">
$(document).ready(function(){
  $('a#megamenu1').on('click', function() {
    $('#rs-series').fadeOut(300)
    });
  });
</script>

And I see I can deal with multiple submenus in this manner…

<script type="text/javascript">
$(document).ready(function(){
  $('a#megamenu1').on('click', function() {
    $('#rs-series,#sl-series,#etc').fadeOut(300)
    });
  });
</script>
1 Like

Nice! I was just about to take a look at the code. Glad you found a solution.

1 Like

@Norm or @Bill

What code should I use to toggle visibility of a Bloc when a breakpoint changes?

(Reason I need it: I am building my menus in Blocs from scratch because Blocs built-in menus aren’t enough for me. I have made different menu dropdowns according to breakpoints. When a dropdown menu is displayed, if the screen size changes, the displayed dropdown contents may get smashed or otherwise look bad, which is something I want to avoid. So I want to automatically toggle off the dropdowns when a screen size breakpoint is crossed.)