Hover over aui dropdown menu

Hello. I’m trying to make a aui dropdown menu that has hover over but can’t seem to figure it out.
Any advice is much appreciated!

Hi @ericosborne,

AUI’s dropdown module does not have an “open on hover” mode. Most “display on hover” interactions in AUI have been deprecated for accessibility reasons: it is not possible for keyboard-only or screen-reader users to easily and consistently perform these interactions.

Could you describe your use-case in a little more detail? There might be a way to achieve what you’re after, but I’d need to know more about the use-case - what the dropdowns are for, what kind of content is in them, and how you’re anticipating end-users typically interact with them.

Cheers,
Daz

2 Likes

Daz,
I don’t need the dropdown to be super fancy. So far I have a clickable one, that has a bunch of links in it to other pages in our space. However, my people like the idea of being able to just hover over the button to open the menu.
This is what I have:

<div class="corners"> 
<button class="aui-dropdown2-trigger aui-dropdown2-subtle aui-dropdown2-trigger-arrowless" aria-controls="command-corners"> 
<img src="/download/attachments/274491927/command%20corners%20black.png?api=v2" alt="Command Corners" width="300" height="54"> 
</button> 
<div class="content"> 
<aui-dropdown-menu id="command-corners" responds-to="hover"> 
<aui-section label="Links"> 
<aui-item-link href="https://wiki.navsea.navy.mil/display/~mdarnall/NSWC+PHD+-+CO%27s+Suggestion+Box">CO's Suggestion Box</aui-item-link> 
<aui-item-link href="https://wiki.navsea.navy.mil/display/PHDCPI/NSWC+PHD+CPI+Home">CPI</aui-item-link> 
<aui-item-link href="https://wiki.navsea.navy.mil/display/NSWCPHN/Command+Review+and+Investigations">CR&I</aui-item-link> 
<aui-item-link href="https://wiki.navsea.navy.mil/pages/viewpage.action?pageId=167310167">D&I EEO Corner</aui-item-link> 
<aui-item-link href="https://wiki.navsea.navy.mil/pages/viewpage.action?pageId=176398454">Did You Know?</aui-item-link> 
<aui-item-link href="https://wiki.navsea.navy.mil/display/NSWCPHN/Facilities+Corner">Facilities Updates</aui-item-link> 
<aui-item-link href="https://wiki.navsea.navy.mil/display/NSWCPHN/NSWC+PHD+HR+Corner">HR Corner</aui-item-link> 
<aui-item-link href="https://wiki.navsea.navy.mil/display/NSWCPHN/In-Service+Engineering+Agent+%28ISEA%29+of+the+Future+Corner">ISEA of the Future</aui-item-link> 
<aui-item-link href="https://wiki.navsea.navy.mil/display/NSWCPHN/IT+Corner">IT Corner</aui-item-link> 
<aui-item-link href="https://wiki.navsea.navy.mil/display/NSWCCraneCorpComms/New+Hire+Corner">New Hire Corner</aui-item-link> 
<aui-item-link href="https://wiki.navsea.navy.mil/display/NSWCPHN/Office+of+Counsel">Office of Counsel</aui-item-link> 
<aui-item-link href="https://wiki.navsea.navy.mil/display/RTW/NSWC+PHD+Return-to-Office+%28RTO%29+Task+Force">RTO Corner</aui-item-link>
<aui-item-link href="https://wiki.navsea.navy.mil/display/NSWCPHN/Security+Corner">Security Corner</aui-item-link> 
<aui-item-link href="https://wiki.navsea.navy.mil/display/NSWCPHN/Veteran%27s+Corner">Veteran's Corner</aui-item-link> </aui-section> 
</aui-dropdown-menu> 
</div> 
</div> 

<style> 
/*aui dropdown button background color*/ 
.aui-dropdown2-trigger { background: #1e90ff; border: #006644; } 
.aui-dropdown2-trigger:hover { 
   --aui-btn-bg: #FFF; 
   --aui-btn-text: #006644; 
} 
/*dropdown menu width and font size and spacing */ 
#command-corners{ min-width: 300px; } 
#command-corners a { color: black; padding: 12px 16px; text-decoration: none; font-size: 16px; display: block; } 
</style>

I’ve kind of incorporated different things as I’ve found them. Gotten everything to work well enough except a hover.
Thanks for any advice!

Eric

Hi Eric,

I’ve put together a short demo on how you could open each dropdown on hover.

Each aui-dropdown-menu element has a show() function on it. Each dropdown trigger has an aria-controls attribute that references the associated dropdown’s ID. We use both of those details: we register a delegate event handler that reacts to all “hover” events on elements with a specific CSS class (here: “custom-dropdown-behaviour”) and an aria-controls attribute. Then we look up the associated dropdown and call its show function.

https://codepen.io/chrisdarroch/pen/JjJGpaq

Hope this helps!

Cheers,
Daz

1 Like

Awesome! That’s a huge help.
While I’m still learning what everything you said means :smile: I think I get the gist of it.
One more thing if you wouldn’t mind, what/where would I add something that makes the menu go away when the mouse goes off of it? So menu shows on mouse hover over and closes on mouse away, if that makes sense…

Eric

This starts to get tricky. Think about how mouse movements happen; people can start moving the mouse from the button toward the dropdown and there will be a period of time where the mouse is inside neither of them. This means you can’t just close the dropdown when the mouse exits the button. You also can’t close the dropdown if the user’s mouse is inside or near the dropdown. From bitter experience, while it seems like a good idea, there are more cases where automatically closing the dropdown causes end-user frustration than there are cases where automatically closing it actually helps the end-user.

Unfortunately, my advice at this stage is not to do this. If you do need to pursue it, I’m afraid I don’t have the time to code a custom solution for you. I could advise to browse the source code for AUI’s inline dialog 2 “hover” behaviour, but again I must stress that it is deprecated for all the accessibility reasons I’ve described so far :slight_smile:

Good luck, and hope that helps :slight_smile:

Cheers,
Daz

1 Like