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.