Adds feature to un-check site-nav...

[S0AndS0]

... on-click anywhere but page links

New pseudo element, when combined with other CSS positioning hacks,
renders behind the site navigation menu while also being attached to the
label that triggers the checkbox.

[ashmaroli]

The intent behind this is not clear. Could you clarify further, @S0AndS0?
Perhaps add a demo..?

[S0AndS0]

Sure @ashmaroli, and thanks for the reminder! The live demo is now available.

Note, seeing this added feature does require tripping the CSS that exposes the menu label and hides the list of page links.

Normally when one clicks on the menu label it requires clicking the menu label again to close it, or clicking on one of the links within the menu. Otherwise it stays open and takes up screen space when interacting with the page. The purposed changes adds a pseudo element behind the menu items that causes a click anywhere (other than within the menu) to also re-click the menu label.

Note, opacity/colorization of the added pseudo element is for demonstration and can be removed without effecting added feature.

Comparing current Minima theme behavior with what I've submitted may be easier than me trying to explain with words alone. It's one of those things that once ya spot the difference it may be not be unseen easily... though hopefully in a good way.

The only thing that I can see being slightly off about changes is that menu items are position: fixed;, however, this is only when the menu is required; otherwise page scrolling behavior is unchanged. And considering that clicking anywhere will now close the menu I don't think it's a braking change.

One thing that may be worth testing is what happens with really tall menus, if I remember correctly from previous tests I had to add more CSS to allow for scrolling within the menu list.

[ashmaroli]

Thank you for responding with the demo @S0AndS0.
I understand the issue now.. A side-effect of having a CSS-only hamburger menu..

Hmm.. I wonder if there's another way out.. 🤔

[S0AndS0]

Welcome for sure, I'm kinda surprised that I didn't setup a public demo previously.

It'd be swell if there's a solution that also doesn't have it's own side-effects; so far this is the most eloquent hack I could come up with, which still leaves a bit more to be desired.

Oh and if overflow-y: scroll is required for taller menus, it may be a good idea to try the suggestions on StackOverflow for hiding the scroll bar.

[njsch]

I don't quite understand what this PR does but I am wondering if it might fix a problem I have where the checkbox for

in the header doesn't work for me at all.

[S0AndS0]

@njsch if ya provide a link to the source that's troublesome I'll attempt to swing-by and review it.

As for what this PR does, check the Files changed tab for a diff.

TLDR

The ::after element added to the label makes a pseudo element that fills the browser window, under the list menu element(s), such that a click anywhere other than on menu items counts as a click on the label too. Because the label is bound to the checkbox, via id and for attributes, the ::after element is too.

---

Here's some comments about what each bit of CSS specificity is doing...

/**
 * `input:checked` -> filters rules/target to only be applied if an input element has the `checked` attribute assigned
 *           `+` -> Adjacent sibling combinator, https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
 *             `label[for="nav-trigger"]` -> Target only labels that have the `for="nav-trigger"` attribute
 *                                     `::after` -> Stylize the `after` pseudo element
 */
input:checked + label[for="nav-trigger"]::after {
  /* ... CSS rules go here ... */
}

... The style rules are setup to provide subtle visual feedback and ensure that the pseudo element is positioned correctly...

input:checked + label[for="nav-trigger"]::after {
  content: '';                  /* _Required_ on pseudo elements  */

  background-color: lightgray;  /* Provides color for following two rules */
  opacity: 0.2;                 /* _Mixes_ background color of this element with those that are below */
  filter: alpha(opacity=20);    /* Compatibility for old IE browsers */

                                /* `%`, `vh`, and `vw` cause pseudo element to expand for older and newer browsers */
  width: 100%;
  width: 100vw;
  height: 100%;
  height: 100vh;

                                /* Assigning position and location defines location regardless of other elements */
  position: fixed;
  top: 0px;
  left: 0px;

  cursor: default;              /* Place-holder, change if further _hinting_ is deemed necessary */
}

[njsch]

I have already fixed it, but thanks for the offer.

…

On 18 Dec 2020, at 6:54 am, S0AndS0 ***@***.***> wrote:  @njsch if ya provide a link to the source that's troublesome I'll attempt to swing-by and review it. As for what this PR does, check the Files changed tab for a diff. TLDR The ::after element added to the label makes a pseudo element that fills the browser window, under the list menu element(s), such that a click anywhere other than on menu items counts as a click on the label too. Because the label is bound to the checkbox, via id and for attributes, the ::after element is too. Here's some comments about what each bit of CSS specificity is doing... /** * `input:checked` -> filters rules/target to only be applied if an input element has the `checked` attribute assigned * `+` -> Adjacent sibling combinator, https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator * `label[for="nav-trigger"]` -> Target only labels that have the `for="nav-trigger"` attribute * `::after` -> Stylize the `after` pseudo element */ input:checked + label[for="nav-trigger"]::after { /* ... CSS rules go here ... */ } ... The style rules are setup to provide subtle visual feedback and ensure that the pseudo element is positioned correctly... input:checked + label[for="nav-trigger"]::after { content: ''; /* _Required_ on pseudo elements */ background-color: lightgray; /* Provides color for following two rules */ opacity: 0.2; /* _Mixes_ background color of this element with those that are below */ filter: alpha(opacity=20); /* Compatibility for old IE browsers */ /* `%`, `vh`, and `vw` cause pseudo element to expand for older and newer browsers */ width: 100%; width: 100vw; height: 100%; height: 100vh; /* Assigning position and location defines location regardless of other elements */ position: fixed; top: 0px; left: 0px; cursor: default; /* Place-holder, change if further _hinting_ is deemed necessary */ } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.