[v1] How to Activate qBtnDropDown menu on mouseover

[folami]

since there are no JS event Objects option like @mouseover, mouseout etc, is there a way to activate the dropdown menu on mouseover?

[turigeza]

@folami

Opening the menu on hover. Almost works : ) Sometimes it doesn’t open not sure why. Maybe somebody else helps you with it. Closing it is more difficult. This is Quasar V1

<div class="q-pa-md">
            <q-btn-dropdown color="primary" label="Dropdown Button" v-model="menu" @mouseover.native="menu = true">
                <q-list>
                    <q-item clickable>
                        <q-item-section>
                            <q-item-label>Photos</q-item-label>
                        </q-item-section>
                    </q-item>

                    <q-item clickable>
                        <q-item-section>
                            <q-item-label>Videos</q-item-label>
                        </q-item-section>
                    </q-item>

                    <q-item clickable>
                        <q-item-section>
                            <q-item-label>Articles</q-item-label>
                        </q-item-section>
                    </q-item>
                </q-list>
            </q-btn-dropdown>
        </div>

[folami]

@turigeza said in [v1] How to Activate qBtnDropDown menu on mouseover:

@folami

Opening the menu on hover. Almost works : ) Sometimes it doesn’t open not sure why. Maybe somebody else helps you with it. Closing it is more difficult. This is Quasar V1

<div class="q-pa-md">
            <q-btn-dropdown color="primary" label="Dropdown Button" v-model="menu" @mouseover.native="menu = true">
                <q-list>
                    <q-item clickable>
                        <q-item-section>
                            <q-item-label>Photos</q-item-label>
                        </q-item-section>
                    </q-item>

                    <q-item clickable>
                        <q-item-section>
                            <q-item-label>Videos</q-item-label>
                        </q-item-section>
                    </q-item>

                    <q-item clickable>
                        <q-item-section>
                            <q-item-label>Articles</q-item-label>
                        </q-item-section>
                    </q-item>
                </q-list>
            </q-btn-dropdown>
        </div>

#thanksAlots

[Hawkeye64]

@folami Full working demo here: https://codepen.io/Hawkeye64/pen/OqBjxM

[folami]

@Hawkeye64 exactly what i was looking for thanks a bunch

[folami]

@Hawkeye64 i just tried your example, it didn’t work on quasar 1.0, is there anything i can do to make work on v1.0?

[Hawkeye64]

@folami That is v1.0, but you need latest @quasar/app for it to work. Run quasar upgrade.

[folami]

@Hawkeye64 globally or in my project folder? because I’m run
Pkg quasar… v1.0.0-beta.9
Pkg @quasar/app… v1.0.0-beta.10

[Hawkeye64]

@folami
quasar - 1.0.0-beta.11
@quasar/app - 1.0.0-beta.12

[Hawkeye64]

I just modified it so it wasn’t as bleeding edge

[folami]

Working perfectly, thanks

[Hawkeye64]

Apparently, Razvan is thinking of incorporating this into the core (for Qmenu) so anything can be activated by the hover with new hover property. Watch for future release.

[kenium]

It can be awesome if we can navigate through Qmenu as any hover on classical website’s menu

[s.molinari]

@kenium - You can. You just have to set up the “hoverability” yourself within the button and the list items of the menu, as Hawkeye64 did here: https://codepen.io/Hawkeye64/pen/OqBjxM

Scott

[kenium]

Hi @s-molinari Thank you but I know, I already saw it and it concerns only one level and I need 2 or 3 levels without creating additional props.

[s.molinari]

Yeah, multiple levels is a bit trickier.

Scott

[Nikitoring]

Hi, @s-molinari How can I show menu on q-tab on mouseover? If q-tab render dymanic in v-for

[s.molinari]

Show me some code in a codepen of how you think it might work. Then I can give you a suggestion.

Scott