Mouse over menu and display submenus

Question

Mouse over menu and display submenus

Navigation

#1 by (0 votes)

1

I have the following problem on my system.

I put a css in the menus, where I hover over the menus and displays the submenus linked to them.

CSS

ul.nav li.dropdown:hover
{ 
    background-color: #0c7cd5;
}

ul.nav li.dropdown:hover ul.dropdown-menu
{ 
    display: block; 
}

my problem is this, when I click on a submenu it stays fixed, but when I move the mouse in another menu, it displays but does not hide in which I clicked, follow the image below:

Could someone help me?

css

asked by anonymous 08.06.2017 / 21:29

1 answer

Typeahead js Autocomplete in Laravel? Problem with Infinite Scrolling in React

score 0 · Accepted Answer

You can use JQUERY on focusout, on focusin, or blur with the following function:

   $("#id-do-componente").on("focusout",function() {

          $('#id-do-componente-a-remover').addClass("id-da-classe");

    }

In other words, when your main component loses the focus that would be the center you will add the class referring to the formatting that hides it. You can create in CSS for example and apply a class to the div class.

<div class="menu-remove">
</div>

no css:

.menu-remove{
  display:none
}

In this case our jquery function would be:

$("#id-do-componente").on("focusout",function() {

              $('#id-do-componente-a-remover').addClass("menu-remove");

        }

The focusin works if the component "wins the attention", ie a mouse click or tab to it, the blur is when you lose any focus, the structure would change to that form:

$("#id-do-componente").blur(function() {

                  $('#id-do-componente-a-remover').addClass("menu-remove");

            }

Sample Code;

php / html code:

<div id="botao-centro">
   <div id="conteudo-centro">
   //Conteudo do menu do botão centro
   </div>
</div>

CSS code:

#botao-centro{
  //Conteudo css botao centro
}
#conteudo-centro {
 //Conteudo css menu centro
}
#conteudo-centro .menu-remove{
  display:none,
}

jquery code:

 $("#botao-centro").on("focusout",function() {

          $('#conteudo-centro').addClass("menu-remove");

    }