How to display Dropdown just by hovering over the content?

Asked

Viewed 2,482 times

1

I would like to know I can display this dropdown without the user needing to click to have their content accessed, just by sliding the mouse over the MSDNAA-Microsft, for example.

  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      MSDNAA-Microsoft
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <a class="dropdown-item" href="#">Suporte MSDNAA</a>
      <a class="dropdown-item" href="https://login.microsoftonline.com/" target="_blank">E-Mail</a>
      <a class="dropdown-item" href="https://fatec.onthehub.com/WebStore/Welcome.aspx" target="_blank"">Microsoft Imagine</a>
    </div>          
  </li>
html twitter-bootstrap dropdown accessibility
  • 1

    You used the "accessibility" tag and it reminded me of something... How will a user who does not use a mouse access the content? (on a tablet, for example, or browsing using the keyboard) - In the case of keyboard you still have :active, but in the case of other technologies you need to think about alternatives. The bootstrap itself abandoned this idea because it is bad for usability (even for normal users). People don’t always do the Hover voluntarily, and it’s not everyone who likes things jumping around the screen just because they’re passing occasionally with the Pointer by the screen.

2 answers

1

0

It is possible to do only in the :hover yes. You need to take the CSS of when it is active and put in the :hover of Toggler. Ai you make this rule in css .dropdown:hover .dropdown-menu { }

See in the model below how it is done. Also note that this way you don’t even need to javascript

OBS 1: I took the liberty of tweaking the style a bit. I left the comments in the CSS code. If you are going to use this Drop in other situations I advise you to use new classes and not edit the Bootstrap default...

.dropdown:hover .dropdown-menu {
    display: block;
    position: absolute;
    transform: translate3d(5px, 28px, 0px); /* distancia entre menu e btn */
    top: 0px;
    left: 0px;
    will-change: transform;
}
.dropdown {
    display: inline-block; /* deixa o LO do "tamanho do próprio texto" e não da largura inteira da tela*/
    list-style: none; /* rita a "bolinha" do LI*/
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" >
        MSDNAA-Microsoft
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">Suporte MSDNAA</a>
        <a class="dropdown-item" href="https://login.microsoftonline.com/" target="_blank">E-Mail</a>
        <a class="dropdown-item" href="https://fatec.onthehub.com/WebStore/Welcome.aspx" target="_blank">Microsoft Imagine</a>
    </div>          
</li>

OBS 2: I had to pull some standard attributes from dropmenus Bootstrap so it’s no longer clickable ok.

Browser other questions tagged html twitter-bootstrap dropdown accessibility

You are not signed in. Login or sign up in order to post.