|
3 | 3 | navigation: auto; |
4 | 4 | } |
5 | 5 |
|
| 6 | + /* |
| 7 | + * Give each top-level menu item its own view transition name — its id, |
| 8 | + * such as "menu-posts" — so each one is captured as an independent group |
| 9 | + * and animates from its old position and size to its new ones across a |
| 10 | + * navigation. This produces the accordion effect: the previously open |
| 11 | + * section collapses as the newly current one expands, instead of the |
| 12 | + * whole menu simply cross-fading. attr() falls back to "none" for any |
| 13 | + * item whose id is missing or is not a valid custom identifier. The |
| 14 | + * shared wp-menu-top class lets the image-pair rule below address every |
| 15 | + * menu-top group at once. |
| 16 | + */ |
6 | 17 | #adminmenu > .menu-top { |
7 | 18 | view-transition-name: attr(id type(<custom-ident>), none); |
| 19 | + view-transition-class: wp-menu-top; |
| 20 | + } |
| 21 | + |
| 22 | + /* |
| 23 | + * Name the collapse button too, so it slides into place with the menu |
| 24 | + * items instead of cross-fading as part of the page root. |
| 25 | + */ |
| 26 | + #collapse-menu { |
| 27 | + view-transition-name: collapse-menu; |
| 28 | + } |
| 29 | + |
| 30 | + /* |
| 31 | + * Clip each menu-top's snapshot to its animating group box. By default a |
| 32 | + * captured snapshot keeps its full intrinsic height, so the new (expanded) |
| 33 | + * submenu paints at full height from the first frame and overlaps the |
| 34 | + * items below while they are still sliding down. Clipping the image pair |
| 35 | + * to the group — whose height animates from the link row to the full |
| 36 | + * expanded height — makes the submenu wipe open, and closed in reverse, |
| 37 | + * in step with those items. |
| 38 | + */ |
| 39 | + ::view-transition-image-pair(.wp-menu-top) { |
| 40 | + overflow: clip; |
| 41 | + } |
| 42 | + |
| 43 | + /* |
| 44 | + * Capture an open flyout submenu — one shown on hover or focus — as its own |
| 45 | + * group, so that it fades out instead of being cut off by the clip above, |
| 46 | + * since it extends outside its menu-top box. match-element gives each |
| 47 | + * flyout a unique name, so two open at once cannot collide and abort the |
| 48 | + * transition. view-transition-group nests the flyout's group inside its |
| 49 | + * menu-top's group, so it moves along with its menu item while fading out |
| 50 | + * instead of staying behind at its old position. Since the nested group is |
| 51 | + * a sibling of the menu-top's image pair, it is not cut off by the clip. |
| 52 | + * |
| 53 | + * In the expanded menu, the current item's submenu is in the normal flow, |
| 54 | + * so it is left to the clipped menu-top. When the menu is folded, either |
| 55 | + * explicitly or automatically on narrower screens, every submenu is a |
| 56 | + * flyout, including the current one. Below 783px the menu is responsive and |
| 57 | + * its submenus are in the normal flow, so none are named there. |
| 58 | + */ |
| 59 | + @media screen and (min-width: 783px) { |
| 60 | + #adminmenu > .wp-not-current-submenu.opensub > .wp-submenu, |
| 61 | + #adminmenu > .wp-not-current-submenu > a.menu-top:focus + .wp-submenu, |
| 62 | + .folded #adminmenu > .opensub > .wp-submenu, |
| 63 | + .folded #adminmenu > .menu-top > a.menu-top:focus + .wp-submenu { |
| 64 | + view-transition-name: match-element; |
| 65 | + view-transition-group: nearest; |
| 66 | + } |
| 67 | + } |
| 68 | + |
| 69 | + @media screen and (min-width: 783px) and (max-width: 960px) { |
| 70 | + .auto-fold #adminmenu > .opensub > .wp-submenu, |
| 71 | + .auto-fold #adminmenu > .menu-top > a.menu-top:focus + .wp-submenu { |
| 72 | + view-transition-name: match-element; |
| 73 | + view-transition-group: nearest; |
| 74 | + } |
8 | 75 | } |
9 | 76 | } |
0 commit comments