Reveals an interactive popout menu on hover/focus.
left: 100%
to move the popout menu to the right of the parent.visibility: hidden
to hide the popout menu initially, allowing for transitions to be applied (unlike display: none
).:hover
, :focus
and :focus-within
pseudo-class selectors to apply visibility: visible
to the popout menu, displaying it when the parent element is hovered/focused.<div class="reference" tabindex="0">
<div class="popout-menu">Popout menu</div>
</div>
.reference {
position: relative;
background: tomato;
width: 100px;
height: 80px;
}
.popout-menu {
position: absolute;
visibility: hidden;
left: 100%;
background: #9C27B0;
color: white;
padding: 16px;
}
.reference:hover > .popout-menu,
.reference:focus > .popout-menu,
.reference:focus-within > .popout-menu {
visibility: visible;
}
Would you like to help us improve 30 seconds of code?Take a quick survey
CSS, Interactivity
Displays a hamburger menu which transitions to a cross button on hover.
CSS, Interactivity
Fades out the siblings of a hovered item.
CSS, Interactivity
Creates a horizontally scrollable container that will snap on elements when scrolling.