CSS only menu, click to disappear

CSS only menu, click to disappear  #angularjs #reactjs

  • pointer-events allowed mouse events to pass through to ancestor elements so that :focus would be available on those parent elements (which is kinda what I need to make the parent element disappear) – HisDivineShadow 3 hours ago
  • I happen to know my way around CSS, but I was never keen on trying to transfer DOM manipulations to CSS, instead of leaving them for JavaScript.
  • My css is setup so that when you hover over a menuHeader element the menu-content element is displayed (i.e. display: inline).
  • Used the visibility property because it’s ability to keep children elements of an element with visibility: hidden visible if said child had visibility: visible explicitly set.
  • The main problem is that I can’t style an ancestor element based on the condition of a child element (which would kind of violate the “cascading” part of CSS).

My css is setup so that when you hover over a menuHeader element the menu-content element is displayed (i.e. display: inline). This all works fine but what I want is that when you click one of the links in the list item elements within the menu-content that the menu (i.e. the parent menu-content element) disappears. Of course I want to do this without any JavaScript. I saw one example that used pointer-events but that restricts use to IE 11 and I’d like to support at least IE 10 if not 9 as well. Any suggestions on how to get this to work?

@ng_real_ninja: CSS only menu, click to disappear #angularjs #reactjs

I have a menu structured like this:

My css is setup so that when you hover over a menuHeader element the menu-content element is displayed (i.e. display: inline). This all works fine but what I want is that when you click one of the links in the list item elements within the menu-content that the menu (i.e. the parent menu-content element) disappears. Of course I want to do this without any JavaScript. I saw one example that used pointer-events but that restricts use to IE 11 and I’d like to support at least IE 10 if not 9 as well. Any suggestions on how to get this to work?

Technically it’s possible, but it’s much ado about nothing (hard to use it in practice):

Besides, once you close a menu the only way to reopen it is by opening another and hovering the initial one.

Important note:

disabled.

So, could you perhaps explain why you ask for a pure CSS solution? The only practical use for pure CSS I had in past 8 years was for a payment gateway page, where JavaScript was strictly off. But, other than that?

I happen to know my way around CSS, but I was never keen on trying to transfer DOM manipulations to CSS, instead of leaving them for JavaScript. After all, that’s what JavaScript is for. Use the right tool for the job. The job here is DOM manipulation. So use JavaScript.

only or, at least, that’s what I think.

Reason for pure CSS: javascript = code => requires unit tests = (more work + more code to browser). I don’t consider this manipulating the DOM, just triggering/applying different classes when certain events happen. CSS does this with events like hover, active, focus but no reliable handler for when an element is clicked. The main problem is that I can’t style an ancestor element based on the condition of a child element (which of course would kind of violate the “cascading” part of CSS). – HisDivineShadow 2 hours ago

You’re wrong about “applying different classes”. CSS does not apply classes. It cannot change the classes. It only applies rules based on the existing classes or other attributes. The moment you want to add/remove classes or other attributes, you’re looking at JS, not CSS. I guess one needs to read the definition of DOM manipulation to be able to tell if something is or is not DOM manipulation. – Andrei Gheorghiu 2 hours ago

Ok, I want to “enable/disable” different classes when different conditions occur. That is what happens when you hover, focus or target an element. It’s not DOM manipulation. – HisDivineShadow 1 hour ago

event for two actions. – Andrei Gheorghiu 1 hour ago

I added the solution I’m describing above to the answer, just for kicks. – Andrei Gheorghiu 1 hour ago

CSS only menu, click to disappear