Bootstrap dropdown menu on mouseenter with active links

Question

I am trying to do bootstrap dropdown menu showing on mouseenter. That is not problem, just need some jquery like:

$('.dropdown-toggle').on('mouseenter', function () {
   $('.dropdown-toggle').dropdown('toggle')
});

What I need is for example div divided to two sections. In each section there will be link to something (using Nette framework so there will be link to specific action and presenter). But I can't achiev it. If dropdown works, link doesn't.

Structure should be like:

<div class="dropdown-toggle" data-toggle="dropdown">
  <div>
    <a href="{plink :User:Dashboard:default, 'userId' => $user->getId()}">
      <span class="text-white"><i class="fa fa-user"></i> {$userData["user"]["name"]}</span>
    </a>
  </div>
  <div>
    <a href="{plink :Account:Edit:default}">
      <i class="fa fa-plus-square text-white btn-xs"></i><span class="text-warning"> {_}Není nastaven aktivní účet{/_}</span>
    </a>
  </div>
</div>

Found some tips, to use data-target attribute, but do'nt know how exactly. https://getbootstrap.com/

EDIT: jQuery:

  $('.dropdown-toggle').on('mouseenter', function () {
    $(this).dropdown('toggle');
    $('.dropdown-toggle>div>a').on('click', function () {
      location.href = $(this).attr('href');
    });
  });

  $('.dropdown').on('mouseleave', function () {
    $('.dropdown-toggle').dropdown('toggle');
  });

Structure:

<button class="dropdown-toggle" data-toggle="dropdown">
  <div>
    <a href="{plink :User:Dashboard:default, 'userId' => $user->getId()}">
      <span class="text-white"><i class="fa fa-user"></i> {$userData["user"]["name"]}</span>
    </a>
  </div>
  <div>
    <a href="{plink :Account:Edit:default}">
      <i class="fa fa-plus-square text-white btn-xs"></i><span class="text-warning"> {_}Není nastaven aktivní účet{/_}</span>
    </a>
  </div>
</button>

So I did it somehow. I wrapped thos two divs in ``. Added classes "btn" and "btn-link" so it looks normal instead of like button. And updated jquery code like this `$('.dropdown-toggle').on('mouseenter', function () { $(this).dropdown('toggle'); $('.dropdown-toggle>div>a').on('click', function () { location.href = $(this).attr('href'); }); }); $('.dropdown').on('mouseleave', function () { $('.dropdown-toggle').dropdown('toggle'); });` — Martin Malina, Aug 03 '21 at 09:42
Okay so you did go with the ugly solution. Instead of window.open, you're using location.href. Lol — Albab, Aug 03 '21 at 15:57

score 0 · Answer 1 · answered Aug 02 '21 at 07:29

On mouseenter, you can change the css of your dropdown menu to show and on mouseleve, hide it again. Try something like this:

$('.dropdown-toggle').on('mouseenter', function () {
   $('.dropdown-toggle').dropdown('toggle');
   $('.dropdown-menu').css('display', 'flex');
});

$('.dropdown-menu').on('mouseleave', function () {
   $('.dropdown-menu').css('display', 'none');
});

.dropdown-menu div{
  color: #fff;
  padding: 1rem;
}

.dropdown-menu div:first-child{
  background: blue;
}

.dropdown-menu div:last-child{
  background: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    <div>
      <h1>
        Left Column
      </h1>
    </div>
    <div>
      <h1>
        Right Column
      </h1>

    </div>
  </div>
</div>

Well, that is working solution just for mouseover. But not for links inside. — Martin Malina, Aug 02 '21 at 09:30
did you check the link in developer tools? If href isn't working then you can use a click event on the `` tag and then open the link using `window.open` — Albab, Aug 02 '21 at 19:06
That works, but its kind of ugly solution. There must be simple solution to that. — Martin Malina, Aug 03 '21 at 07:17
Well, I see that despite it being an ugly solution you still decided to go for it. If you expect an accurate solution then at least provide a reproducible example or a snapshot of how your code looks after the document has been loaded. — Albab, Aug 03 '21 at 15:59

Bootstrap dropdown menu on mouseenter with active links

1 Answers1