Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Conversation

S0AndS0
Copy link

@S0AndS0 S0AndS0 commented Sep 20, 2019

... 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.

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.
@S0AndS0 S0AndS0 changed the title 🏭 Adds feature to un-check site-nav... Adds feature to un-check site-nav... Sep 20, 2019
@ashmaroli
Copy link
Member

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

@S0AndS0
Copy link
Author

S0AndS0 commented Jan 17, 2020

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
Copy link
Member

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
Copy link
Author

S0AndS0 commented Jan 17, 2020

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
Copy link

njsch commented Dec 17, 2020

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
Copy link
Author

S0AndS0 commented Dec 17, 2020

@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
Copy link

njsch commented Dec 17, 2020 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants