From 92e06385f75aacdc8526d496aa0b12cc6611083e Mon Sep 17 00:00:00 2001 From: Helen Chong <119173961+helenclx@users.noreply.github.com> Date: Sat, 20 Jul 2024 13:52:56 +0800 Subject: [PATCH] Use popover for hamburger navigation menu --- src/_includes/global/navbar.njk | 166 ++++++++++++-------------------- src/assets/css/general.css | 2 - src/statements/colophon.md | 3 +- 3 files changed, 60 insertions(+), 111 deletions(-) diff --git a/src/_includes/global/navbar.njk b/src/_includes/global/navbar.njk index 053954e7..334d617c 100644 --- a/src/_includes/global/navbar.njk +++ b/src/_includes/global/navbar.njk @@ -1,145 +1,97 @@ -{# Accessible hamburger menu code based on: -https://kalechips.net/projects/snippets/burger #} - {% set navLinksEl %} -{%- if tags and tags.includes("shrine pages") %} -
  • - Shrine Home -
    • -{%- endif -%} -{% block navbarLinks %}{% endblock %} -{%- if tags and tags.includes("shrine pages") %} -
  • Shrine Directory
    • -
  • Main Site
    • -{%- endif -%} + {%- if tags and tags.includes("shrine pages") %} +
  • + Shrine Home +
    • + {%- endif -%} + {% block navbarLinks %}{% endblock %} + {%- if tags and tags.includes("shrine pages") %} +
  • Shrine Directory
    • +
  • Main Site
    • + {%- endif -%} {% endset %} +
    + +
    {%- css %} - :root { - --icon-burger: url(/assets/icons/burger.svg); - --icon-close: url(/assets/icons/close.svg); - --sz-icon: 2.5rem; - } - .navbar { background: var(--clr-navbar-bg); width: 100%; z-index: 998; position: sticky; top: 0; - } - - .navbar__toggle { - color: var(--clr-navbar-link); - font-size: 1.25rem; - font-weight: 700; - } - - .navbar__toggle { - list-style-type: none; - display: flex; - align-items: center; - gap: 0.3em; - padding: 0.4em 0.6em; - background-color: inherit; - } - - .navbar__toggle::-webkit-details-marker { display: none; } - - .navbar__toggle:focus, - .navbar a:focus { - outline: 0.15em solid var(--clr-navbar-link); + padding: 0.6em; } .navbar a:focus { outline-offset: 0.1em; } - .navbar__menu--links, - .navbar__links { - list-style-type: ""; - flex-wrap: wrap; - gap: 1em; + .navbar__toggle { + background-color: inherit; + color: var(--clr-navbar-link); + border: none; + padding: 0; + font-size: 1.25rem; + font-weight: 700; + display: flex; + align-items: center; + gap: 0.3em; } - .navbar__menu--links a, - .navbar__links a { + .navbar__toggle svg { fill: currentColor; } + .navbar__toggle:focus, + .navbar a:focus { outline: 0.15em solid var(--clr-navbar-link); } + + .navbar__menu { + list-style-type: ""; + margin: 0; + padding: 0; + display: grid; + gap: 1.5em; + text-align: center; + } + + .navbar__menu a { color: var(--clr-navbar-link); text-decoration: none; cursor: pointer; - display: block; + display: inline-block; } - .navbar__menu--links { - display: flex; - padding: 0 1em; + .navbar__menu a:hover { color: var(--clr-link-hover); } + .navbar__menu a:focus { outline-offset: 0.2em; } + .navbar__links { display: none; } + + .navbar__popover { + background-color: var(--clr-navbar-bg); + border: 0.15em solid var(--clr-navbar-link); + padding: 1.5em; + width: 80%; } - .skip a { - position: absolute; - left: -10000px; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; + .navbar__popover::backdrop { + background-color: black; + opacity: 0.5; } - .skip a:focus { - position: static; - width: auto; - height: auto; - } - - .navbar__links { - display: none; - padding: 0.2em 0 0 0; - } - - .navbar__links a:hover { color: var(--clr-link-hover); } - .navbar__links a:focus { outline-offset: 0.2em; } - /* Tablet screen size */ @media only screen and (min-width: 43.75rem) { - .navbar { padding: 0 0.6em; } - .navbar__burger { display: none; } + .navbar { padding: 1em 0.6em; } .navbar__toggle { display: none; } .navbar__links { display: flex; justify-content: space-evenly; gap: 0.5em; - padding: 0; } } -{% endcss %} - -{%- js %} - const navbarBurger = document.querySelector(".navbar__burger"); - navbarBurger.addEventListener("keydown", (event) => { - if (event.key == "Escape") { - navbarBurger.removeAttribute("open"); - navbarBurger.ariaExpanded = false; - document.querySelector(".navbar__toggle").focus(); - } - }); -{% endjs %} \ No newline at end of file +{% endcss %} \ No newline at end of file diff --git a/src/assets/css/general.css b/src/assets/css/general.css index d7efb56e..6cc226eb 100644 --- a/src/assets/css/general.css +++ b/src/assets/css/general.css @@ -81,8 +81,6 @@ blockquote > * + :not([class]), .c-blockquote__attribution { margin-top: var(--sz-paragraph-margin); } button:hover { cursor: pointer; } - -button:focus, details:focus { outline-offset: 0.2em; } figure { diff --git a/src/statements/colophon.md b/src/statements/colophon.md index 65ab9ab5..a6e0d566 100644 --- a/src/statements/colophon.md +++ b/src/statements/colophon.md @@ -1,7 +1,7 @@ --- title: Colophon keyword: colophon page -updated: 2024-07-18 +updated: 2024-07-20 toc: true eleventyNavigation: order: 14 @@ -54,7 +54,6 @@ Due to this website being a static site, JavaScript is used to create dynamic an * [{% cite "Star Wars: Knights of the Old Republic" %}](/shrines/starwarskotor) * [{% cite "Cassette Beasts" %}](/shrines/cassettebeasts) * Birthdays of characters from {% cite "A Summer’s End — Hong Kong 1986" %} on its shrine. -* When this site is viewed on mobile devices, the navigation bar's hamburger menu uses JavaScript to enable using the Escape key to close the navigation manu. * Scott O'Hara's [ARIA Tooltips](https://github.com/scottaohara/a11y_tooltips) script is used to implement accessible tooltips that meet Web Content Accessibility Guidelines (WCAG) 2.2 success criterion for [1.4.13: Content on Hover or Focus (Level AA)](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html), by allowing visitors to see tooltips on keyboard focus and dismiss tooltips by pressing the Escape key. * Zach Leatherman's [details-utils](https://www.npmjs.com/package/@zachleat/details-utils) JavaScript package is used to automatically expand sidebar table of contents on wide screens. * [status.cafe](https://status.cafe/) widget, which is placed on the home page, uses JavaScript to fetch data of my latest status update.