Quasar - Multi submenu with hover
by ph822720355
HTML
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
<div id="q-app" >
<q-layout view="hHh lpR fFf" ref="main">
<q-header elevated class="text-white header-backgroud-color" height-hint="98">
<q-toolbar class="q-pa-sm">
<q-toolbar-title class="row items-end">
<div class="q-mx-xs">
<img src="" class="cust-h-60">
</div>
<!-- Main Level Start-->
<q-btn v-for="(main, index) in menuList" class="header-toolbar-title q-mx-xs" flat color="grey-1" :label="main.func"
@mouseover="mouseOverMenuEvt(main)" @mouseleave="mouseLeaveMenuEvt(main)">
<q-menu :ref="main.uuid" content-class="bg-grey-4 text-brown-7 header-nav-title" transition-show="jump-down" transition-hide="jump-up">
<q-list class="cust-min-w-100">
<!-- Second Level Start -->
<template v-for="(second, index) in main?.children">
<q-item v-if="second?.children?.length > 0" clickable
@mouseover="mouseOverMenuEvt(second)" @mouseleave="mouseLeaveMenuEvt(second)">
<q-item-section>{{second?.func}}</q-item-section>
<q-item-section side v-if="second?.children?.length > 0">
<q-icon...JavaScript
new Vue({
el: '#q-app',
data() {
return {
rootNode: {}, // root node
firstNode: {}, // first node
mouseOverNode: {}, // current enter node
mouseLeaveNode: {}, // current leave node
/****** MockDatas ******/
menuList: [
{
func: 'Main-Apple',
uuid: uuidv4('menu'),
level: 0,
children: [
{
func: 'Second',
uuid: uuidv4('menu'),
level: 1,
children: [
{
func: 'Third',
uuid: uuidv4('menu'),
level: 2,
children: [
{
func: 'Fourth',
uuid: uuidv4('menu'),
level: 3,
},
{
func: 'Fourth',
uuid: uuidv4('menu'),
level: 3,
},
{
func: 'Fourth',
uuid: uuidv4('menu'),
level: 3,
...