Currently, our project involves developing an Angular SPA with dropdown menus in the main navbar. To achieve this effect, we are utilizing CSS hover selectors. However, we're facing an issue where we want these dropdowns to close after an action is performed within them, without obstructing the ability to reopen them. For instance, if a user clicks on a link within a dropdown (an internal link with ui-sref), they are directed to a specific state, but the dropdown continues to be visible until the mouse moves outside it, partially covering the new content displayed. Our aim is to have the dropdown close automatically when an action is executed within it, allowing users to easily reopen it by hovering over the trigger once again.
We've experimented with removing and re-adding classes (even after a timeout) to hide the dropdown, but it seems to reappear consistently.
Find a similar setup on Plunker: https://plnkr.co/edit/qzQk4r2WQFhwsgUWug39?p=preview
Below are the essential parts (Angular controller excluded as it contains no relevant information):
HTML:
<div class="hoverable has-dropdown">
<button class="dropdown-trigger">Hover me!</button>
<div class="dropdown">
Dropdown content
<button ng-click="buttonAction()">Action</button>
</div>
</div>
CSS:
.dropdown {
display: none;
position: absolute;
top: 20px;
width: 100px;
height: 100px;
background: lightgrey;
padding: 1em;
}
.has-dropdown {
position: relative;
height: 20px;
}
.has-dropdown .dropdown-trigger:hover + .dropdown,
.has-dropdown .dropdown-trigger + .dropdown:hover {
display: block;
}
Thank you!