From 48ed6835cc2758dbd550890bfe487f68708a67e0 Mon Sep 17 00:00:00 2001 From: alkshendra Date: Tue, 9 Oct 2018 08:20:29 +0530 Subject: [PATCH] Improve popout-menu snippet and Explanation --- snippets/popout-menu.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/snippets/popout-menu.md b/snippets/popout-menu.md index bac7bf675..55c9dd481 100644 --- a/snippets/popout-menu.md +++ b/snippets/popout-menu.md @@ -30,7 +30,8 @@ Reveals an interactive popout menu on hover and focus. padding: 15px; } .reference:hover > .popout-menu, -.reference:focus > .popout-menu { +.reference:focus > .popout-menu, +.reference:focus-within > .popout-menu { visibility: visible; } ``` @@ -40,12 +41,12 @@ Reveals an interactive popout menu on hover and focus. #### Explanation 1. `position: relative` on the reference parent establishes a Cartesian positioning context for its child. -2. `position: absolute` takes the popout menu out of the flow of the document and positions it - in relation to the parent. +2. `position: absolute` takes the popout menu out of the flow of the document and positions it in relation to the parent. 3. `left: 100%` moves the the popout menu 100% of its parent's width from the left. 4. `visibility: hidden` hides the popout menu initially and allows for transitions (unlike `display: none`). -5. `.reference:hover > .popout-menu` means that when `.reference` is hovered over, select immediate - children with a class of `.popout-menu` and change their `visibility` to `visible`, which shows the popout. +5. `.reference:hover > .popout-menu` means that when `.reference` is hovered over, select immediate children with a class of `.popout-menu` and change their `visibility` to `visible`, which shows the popout. +6. `.reference:focus > .popout-menu` means that when `.reference` is focused, the popout would be shown. +7. `.reference:focus-within > .popout-menu` ensures that the popout is shown when the focus is *within* the reference. #### Browser support