I'm currently working on a dynamic sidebar in vuejs and I need some assistance. The issue I'm facing is that I want the submenu to remain open when hovering over either the parent menu or the submenu itself. However, when I move the mouse away from the parent menu, the submenu disappears. I want to keep the submenu open at all times. Below is the code I have so far:
<div v-for="item in items" class="categories" >
<p @mouseover="onOver(item)" @mouseleave="onLeave">{{item.title}}</p>
<div v-if="ShowSubMenu" class="subMenu">
<div v-for="childItem in item.child" > <p class="text"> {{childItem.childTitle}}</p> </div>
</div>
</div>
</div>
Vue Js:
data: {
ShowSubMenu: false,
items: [
{
title: 'name'
},
{
title:'hoverMe',
child : [
{childTitle : 'ChildTitle1'},
{childTitle : 'ChildTitle2'},
{childTitle : 'ChildTitle3'},
] ,
},
{
title: 'name3'}
]
},
methods: {
onOver: function(item){
if (item.child != null) {
this.ShowSubMenu=true;
}
},
onLeave: function(){
this.ShowSubMenu=false;
}
}
css:
.categories{
background-color:red;
width:100px;
height:200px;
}
.subMenu{
background-color:red;
height:150px;
width:150px;
position:absolute;
top:100px;
left:150px;
}
.text{
color:blue;
}