I have a website that displays content based on items checked in a menu list. If the screen width gets too small the menu is rotated and hidden. Additionally, a burger button is displayed. If the burger button gets activated (checkbox as well), the menu is unhidden and the content is hidden.
Neither the content nor the menu have access to the checkbox behind the burger button, because they are children of a sibling of the burger button.
As a result, if a menu item was checked, the burger button is not unchecked, and the visitor needs to click on the burger button again to close the menu and see the content.
Somehow I need to find a hack to uncheck the burger button, if a different menu item was selected, or if a menu item was clicked.
JavaScript is not required yet and shall never be used.
I hope someone knows a hack to fix this - I am clueless in this case...
Thank you for your numerous comments.
The answer is quite simple: CSS3 can't do what I tried to achieve. There was no trick at all to get this done, not even involving the :target pseudo-class, because CSS can't manipulate and reset the URL anchor, neither can it untick the checkbox. That caused the menu staying visible after selecting the content as mentioned above.
As a result, I have rewritten the whole website (well, not the content to be precise).
There is a theoretically simple solution: Using sibling radio buttons for all controls.
This means:
I have one radio button for the burger menu. It accesses the following (sibling) <div> element with the adjacent sibling combinator (+) and toggles the burger menu on and off. (Which results in a changed visibility property.)
I have multiple radio buttons for the content. Succeeded by their respective content div analogously to (1.).
I have multiple labels all over the place that address these radio buttons by using their for attribute. Fortunately, the for attribute has multiplicity 1:n, so that it was possible to address the content <div>s by both, the <nav>-bar, displayed for high resolution devices, as well as the burger menu, displayed on low resolution devices on click on the burger button which is not visible for high resolution displays.
So as a result, I don't do any menu transformations, but have just duplicated the <label>s for these toggles and display either the <nav> bar or the burger button.
Downsides:
I lost the ability to keep the style of the <label>s for the currently active content changed while this content is displayed, since these <label> elements are not siblings of their corresponding checkbox/radio anymore, but on :hover there is an effect.
It is not possible to have the burger menu displayed leaving the current content displayed as well in the background. Both are and need to be in the same radio button group, which means that the burger menu is displayed instead of other content until a label is clicked in the burger menu.
Why am I even doing this (Benefits):
From my perspective, running scripts on a visitors machine is like highjacking their compute power on their device in their sphere and by forcing them to activate JavaScript or other stuff, exposing them to serious risks that could be avoided. So as a result, I consider the unnecessary use of JavaScript as an unethical act.
With this hiding technique of the content I am able to transfer all the content to the visitor a single time and allow for a perfect experience once the content is loaded.
Related
This wasn't happening previously for me, but I updated to iOS 9.3 two weeks ago and now hidden elements on my web page are hidden when the keyboard is displayed or another input is selected.
Annoyingly a top fixed element is only hidden if the page is scrolled, and the bottom is always hidden. This seems to be a way to 'solve' the issues encountered with fixed elements being left in random positions on the screen when the keyboard is displayed, but now I've got a situation where the elements don't reappear reliably, meaning I lose my main navigation bar for my app.
Is there any way to disable this auto-hiding behaviour? I've created a barebones page that shows the behaviour here: http://128.199.171.247/test.html
Unfortunately the title I have given is very vague. I honestly wasn't sure how to word it. Anyway, basically I currently have a vertical navbar with a small caret beside the text. Once clicked, the particular button uncollapses and shows it's contents.
As seen in the image above, I'm attempting to have a secondary caret that should be sitting on the right of the button. This caret will follow suit on every other button once I get it working. Anyway, I'm currently using twitter-bootstrap and from what I understand, I could be able to split the button into 2, each having their own function. For example, if one were to click the text and the downwards caret, it should uncollapse the menu (Which it does fine right now). Though, when you click the right facing caret, it should just bring you to another page via an href or something. Currently, clicking either button will collapse and uncollapse the menu.
As you can see, the right facing caret separates itself from the original button but in a weird way. On the far right of the image is an example of the button separation I would like. In the Twitter-Bootstrap example, the "button" text and the caret both do different functions. I'm not entirely sure on how to achieve this via the current button setup I have. I'm quite happy with how the current buttons look visually but I want to be able to add that secondary caret that is justified to the right of the button. As well as have that secondary button separate nicely, similar to that of the Twitter-Bootstrap example.
TL;DR: how do I get a button to split into 2 piece via the current HTML that I have. I would like to keep the styling and I would like each button to have it's own functionality.
(Enlarge image)
http://i.imgur.com/Xm7ILoq.png
Just make two buttons and style them to be close to one another. Use CSS styling to get it done. You can lower the margins on the sides to get them closer, you could use border-radius to get rid of the corners in the middle, etc etc.
Just figure out how you want it to look. And forget about splitting buttons, that is not something you can technically do, or should want. Create 2 buttons and style them.
I have a pure CSS navigation menu with a drop-down section based on some automated menu creation tool and heavily edited.
Previously the drop down was a single column but now, with increased number of pages, it needs to have multiple columns to remain neat looking.
The problem is now the drop-down menu covers my form (where it previously didn't), which is fine, but when moving your mouse over links in the menu the thing closes if you touch any form fields that are behind it.
Menu CSS is probably too long to paste here. Is there a way to stop the drop down from closing when touching elements behind it with the mouse?
Set the z-index of the menu to a high number. Should keep it above other elements.
At the moment, my site displays the menu items horizontally and when the user hover over each one, its submenuitems are displayed. However, by the time the user tries to click on the subitem, they disappear. Is there any way I could delay the time in which the subitems are visible?
Yes, it is possible (using CSS3 transistions/animations) to add a delay on this show/hide behaviour but I think the trouble is to do with:
How you've nested your tags
Which tags have the associated :hover styles
If a user moves their mouse off the container element, the submenu is getting hidden again. They need to stay in the 'target area' of whichever element has associated :hover styles for child elements to be displayed. (I presume you're doing the show/hide of the submenu via CSS only.)
Really though, you need to give a code example in order to give specific feedback.
Looking for a way in CSS (in the child theme) to make a pop out from one div display over another, without blocking the links in the lower div when the pop-out is closed.
I am trying to use the Facebook Like Button with the comment pop-out on the pages of my site and have made the .widget-pad area of my section appropriately sized to display it when it pops up, so that it goes over another section and div that is containing a large image that links to another page.
However, when the Like button is unclicked and the pop-up is not displayed the linked area (silver part in this pick) is not-clickable.
The area below where the transparant div from the Like Button is still clickable.
How to make it so I can still click the links below where a popout happens on my page?
Ok I found the answer -- I needed to use CSS to select the .widget element and not the .widget-pad element I had been using before.
Note to all trying to deal with implementing Facebook Like in WordPress widget, something like this can help if you are having trouble getting the Comments pop-out to display over other <div>'s:
.widget{overflow: visible}