How to Fix Drop Down Menu Quirks


#1

Here is my document containing an example drop down menu I created, saved in Blocs 3.1.1:

ExampleMenu.bloc.zip (46.7 KB)

Please perform these 5 steps:

  1. Open the above document in Blocs.
  2. Preview.
  3. Click on “製品” to make the menu drop down and then click “VISION” to make the submenu pop out.
  4. Now click anywhere on the page to close those menus.
  5. Click on “製品” again. Note that not only does your primary menu drop down, but the submenu also displays. That is not how the UI in MacOS works and therefore is what I want to fix. In other words, Blocs makes submenus “sticky” by default. How do I make submenus to NOT be sticky?

Now for a second, related question…

In MacOS, open Safari and click on the File menu and scroll down within that menu until you get to Share. See how the submenu pops out without you needing to click? That’s precisely what I want to see happen in my menus. In other words, how can I change the document above such that all I need to do is merely mouseover the word “VISION” in that dropdown to get the submenu to automatically display? (And then of course it should vanish when I move my arrow pointer anywhere outside that submenu – just like MacOS.)

Lastly, here is an existing website I created in Freeway Pro 7 which is NOT responsive but has menus that work like MacOS menus (i.e., correctly):

https://kiramek.com

Please note that I am not a Blocs expert or code expert, so I appreciate as much hand-holding as you can provide to resolve these drop down menu problems.

Thank you,

James W.


#2

Well, it’s been more than 72 hours and my opening post has garnered 40 views but zero replies. Maybe this will help…

"Pretty Please, with Sugar on top"?

Surely at least one of you out there has build a menu in Blocs, right? And surely you must have built at least one navi menu with submenus, right? If so, how did you resolve the sticky problem of the submenu, as I described in my opening post? If you didn’t try to resolve it, may I ask why not? The UI of operating systems we use don’t force submenus to stick like that and therefore it’s oddball behavior that I would like to address. I simply am seeking advice from those of you more experienced in Blocs who may have dealt with it already.

Any thoughts, @Eldar?

Thank you,

James W.


#3

Find the cause, but don’t know why.!(See the red rectangle)
click製品 then click Vision, if no click on menu, the second dropdown menu’s class stay on “dropdown open”
Can you use hover instead of click to open the menu?

28%20PM


#4

Hover is something I want to use to kick out the submenu, but I don’t know how to do that, and that too is why I started this thread, to find out how others implemented Hover to pop out submenus. (I still like “click” to pulldown the main menu though, because that’s how MacOS works.)


#5

Hi James,

I have never used a submenu inside a submenu, because I think it is not a very modern way to design navigations, so I never had a need to find a solution for this. I will take a look at it when I have time. I see how it’s important to your website with lot’s of menus and submenus.


#6

I am not familiar with javascript. you need to modify add function in blocs.min.js using “mouseleave” or “mouse out” event. Blocs uses “click” event to toggle dropdown menu.


#7

Really? Is a code hack the only way?

If you have a “modern way” to display multiple links as I seek to do, I of course am eager to see that most of all. Indeed, it was my aim to try to first recreate my existing menus, then after that figure out how to display them in a modern way similar to the following site:

https://www.w3schools.com/css/css_dropdowns.asp

Go to that site and click on “MORE” and note how an overlay pops out with numerous links and categories. I would assume that is the “modern way” you are pondering. And I would like to hear your thoughts on implementing something similar.

Thank you!

James W.