How to keep showing the dynamic submenu when hovering over parent menu or submenu in vuejs?

user_12917014 0
Viewed 853

I need help regarding this sidebar in vuejs, I am trying to make a dynamic sidebar where I have to keep open the submenu while hovering over the parent menu or the submenu, whenever I remove the mouse from parent the submenu disappear. I need to keep opening the submenu. Here is my code : 

<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;





}
vuejs2 vue.js css html javascript
1 Answers

This would be one of the possible solutions to your problem. It's purely CSS based too:

https://jsfiddle.net/vugrjbn6/16/

.categories{
  background-color: red;
  width: 100px;
  height: 200px;
  position: relative;
}

.subMenu{
  display: none;
  position: absolute;
  background-color: red;
  height: 150px;
  width: 150px;
  top: 0;
  left: 100%;
}

.categories:hover .subMenu {
  display: block;
}

It works by displaying the submenu only if the category is hovered. The important thing to realize is that category contains the title AND submenu. So by default submenu is hidden, if you first hover the title it gets displayed, and it stays displayed as long as you keep hovering title or submenu (as both are part of category).

user_70244020
Related