Open menu on hover?

[ed2050]

Question

Before I re-invent the wheel - does anyone have code to expand menu on hover? Current ui.menu requires clicks to expand, which is annoying and violates standard web behavior.

[falkoschindler]

Like this?

with ui.button('Menu').on('mouseenter', lambda: menu.open()):
    with ui.menu() as menu:
        ui.menu_item('Item 1')
        ui.menu_item('Item 2')
        ui.menu_item('Item 3')

[ed2050]

That's close. Two problems. 1) doesn't work on my side. 2) visibility isn't quite right.

Code doesnt work

Not sure how your lambda: menu.open () ever works with scoping. menu is defined after lambda / inside button. Even with dynamic scoping I don't see how it could work.

Anyway when I hover over button, nothing happens and nicegui throws this error:

Traceback (most recent call last):
  File "/opt/Library/Python/3.8/lib/python/site-packages/nicegui/events.py", line 396, in handle_event
    result = handler(arguments) if expects_arguments else handler()
  File "/Users/ed2050/gui/tools.py", line 1385, in <lambda>
    with ui.button ('menu').on ('mouseenter', lambda : menu.open ()) :
AttributeError: 'collections.defaultdict' object has no attribute 'open'

Not sure what that's about. I don't define menu anywhere else. I would expect a NameError on lambda because menu doesn't exist at global scope when lambda is called or local scope when lambda is defined.

Visibility

What containers beside ui.button can you put a ui.menu in? I tried several including ui.row and <div> and nothing worked. No menu item renders on page. No DOM nodes for the menu exist. Apparently parent = ui.button does some kind of magic.

with ui.row () :
    with ui.menu ().classes ('menu') as menu :
        ui.menu_item ('foo')
        ui.menu_item ('bar')

# rendered DOM has no foo, no bar, no .menu
# just an empty <div class="nicegui-row"> </div>

I want a multi-level menu with top level already expanded. Like this - see top menu bar.

Top level of menu is Business Types, Products, Partners, .... Hover on one of those brings up submenu. Submenu could have more nested items.

If we solve the scoping issue above, then I suppose I could use ui.button for each top-level item, and ui.menu() for each submenu beneath. I guess it would work. Feels very hacky though. Different treatment for top-level items vs subitems.

It's all one single menu. Can't you just put menu in a different container and start with first level already open / expanded? Something like this:

with ui.row () :
    menu = ui.menu ()
    with menu :
        with ui.menu_item ('Products') :
            ui.menu_item ('foo')
            ui.menu_item ('bar')
        with ui.menu_item ('Partners') :
            ui.menu_item ('rab')
            ui.menu_item ('oof')

    menu.expand () or menu.open ()
   # or maybe already expanded when it sees parent is not ui.button

[falkoschindler]

I'm pretty sure my code works, at least in isolation. The error you're seeing suggests that there is some menu collection defined elsewhere.
Regarding the defined or undefined menu: When the lambda statement is being called, menu will be defined. So this code is valid, even though some linters suggest simplifying it to .on('mouseenter', menu.open) which won't work.
Alternatively you can keep a reference to the button and call button.on(...) after defining the menu.

[ed2050]

Ok if it works for you. menu must be defined somewhere in my code.

On lambdas - this is beyond nicegui per se, but I don't see how menu exists when your lambda runs:

with ui.button('Menu').on('mouseenter', lambda: menu.open()):
    with ui.menu() as menu:
        ui.menu_item('Item 1')

• menu is only defined inside the with ui.menu () as menu block.
• lambda is defined outside menu block. So no closure to preserve the reference.
• when lambda runs, it
  • checks local scope for a var named menu
  • checks global scope for a var named menu
• local scope should fail. it would succeed if lambda ran inside the menu block. But that block ends as soon as menu_items are created, then rest of page is built. By the time user hovers with mouse, page function is done. lambda runs outside with menu and there's no menu var in scope.

You're saying lamda succeeds because menu still exists after with menu block? That's so leaky and wrong! But it seems to be true. I tested for loops and with blocks, vars defined inside still exist after block ends. Too bizarre.

Today is the first day I'm disappointed with python. :( Besides the fiasco that is pickle.

[ed2050]

I started looking at ui.expansion. It seems like it could work. Got hover behavior working by separating object creation from event listeners. And expansion already has a flag to start in expanded state.

Here's code for a top-level hover menu. Next step, add nested submenus.

with ui.row ().classes ('menurow') :
    menu = ui.expansion ('menu')
    menu.on ('mouseenter', lambda : menu.open ())
    menu.on ('mouseleave', lambda : menu.close ())

    with menu :
        for name, url in menulinks :
            ui.link (name , url)

One issue is it's part of page layout. Opening the expansion pushes content down the page to make room. I think I can solve that with css though, so only top level affects page flow.

[falkoschindler]

Let's check the documentation for QMenu:

The idea with QMenu is to place it inside your DOM element / component that you want to be the trigger as direct child.

So it shouldn't be limited to buttons. This works as well:

with ui.label('Click me!'):
    with ui.menu():
        ui.menu_item('Item 1')
        ui.menu_item('Item 2')

[ed2050]

It seems I tried the wrong ones. ui.menu doesn't work inside ui.row or ui.element ('div'). Guess it's hunt and pray then. 🙏

[falkoschindler]

It does work.

with ui.element('div').classes('border w-10 h-10'):
    with ui.menu():
        ui.menu_item('Item 1')
        ui.menu_item('Item 2')

with ui.row().classes('border'):
    ui.label('A')
    ui.label('B')
    with ui.menu():
        ui.menu_item('Item 1')
        ui.menu_item('Item 2')

[ed2050]

Interesting. I'm on an old version of nicegui. Maybe that's why it doesn't work. Otherwise I'm not sure what could be the cause.

[ed2050]

The other problem with ui.menu is closing the menu after hover. Open works fine: hover on button and menu opens. You would think close works the same:

    with ui.button ('menu root') as bmenu :
        with ui.menu () as menu :
            
            bmenu.on ('mouseenter', lambda : menu.open ())
            bmenu.on ('mouseleave', lambda : menu.close ())  # <-- NO
            
            ui.menu_item ('foo')
            ui.menu_item ('bar')

But no. Menu closes as soon as you move to the menu items to make a selection. Options immediately disappear before you can select anything.

It's a common problem with naive js menus. When menu content DOM nodes are not under the menu root DOM node, then mousing to menu options is no longer hovering inside root node. This creates mouseleave event which closes menu. Indeed html generated by above code is shown below.

Fix

To fix, you need mouseleave listener on the menu options, not the button. Change second bmenu listener to menu.on ('mouseleave', lambda : menu.close ()).

This mostly works, but not perfectly. If you move mouse out of menu through the adjacent button, then menu doesn't close. If you leave menu through sides though, it closes properly.

Other Problems

I haven't tested with multi-level menus. It may not work in that case, since submenu will not be under parent menu_item in DOM (leave first-level menu to second, first level menu closes).

I also discovered that DOM nodes for menu options are deleted from DOM when menu isn't visible. Not hidden, but completely removed from the page! This is strange quasar behavior that makes menus harder to work with. Why not just use 'display : none' when not displayed?

Next steps

I'm still inclined to work with ui.expansion instead of ui.menu. Not only does expansion nest properly, but items don't disappear from DOM. And perhaps easier to use arbitrary containers for layout (horizontal menus, vertical menus, picture menus, card menus, etc). QMenu is too inflexible and bizarre to work with.

Generated HTML

<button class="q-btn q-btn-item non-selectable no-outline q-btn--standard q-btn--rectangle bg-primary text-white q-btn--actionable q-focusable q-hoverable" tabindex="0" type="button" id="c33">
    <span class="q-focus-helper"></span>
    <span class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
        <span class="block">menu root</span>
    </span>
</button>

<div id="q-portal--menu--28"><div role="menu" id="c34" class="q-menu q-position-engine scroll q-menu--dark q-dark rmenu" loopback="true" tabindex="-1" style="--q-transition-duration: 300ms; top: 0px; left: 330px; visibility: visible; max-height: 368.8px;">
    <div class="q-item q-item-type row no-wrap q-item--dark q-item--clickable q-link cursor-pointer q-focusable q-hoverable" role="listitem" tabindex="0" id="c35">
        <div class="q-focus-helper" tabindex="-1"></div>
        foo
    </div>
    <div class="q-item q-item-type row no-wrap q-item--dark q-item--clickable q-link cursor-pointer q-focusable q-hoverable" role="listitem" tabindex="0" id="c36">
        <div class="q-focus-helper" tabindex="-1"></div>
        bar
    </div>
</div>