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.
Related
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.
I've actually got the tooltip showing where I want it to show, that part is working. The text it's displaying is contained in a <span> that's hidden until they hover over a div that has the tooltip class on it, similar to the example on w3schools.com.
I have a column of div's and only certain ones get the tooltip class. The problem I'm having is that the span is successfully hidden in the div's that don't have the tooltip class, but it's still reserving the space for it and I'm having trouble figuring out how to get it to not do that.
I'm hiding the <span> with CSS's visibilty:hidden which hides the text but the space for it is still reserved. If I change it to display:none instead of visibility:hidden it hides the text and does not reserve the space for it, which makes sense and that is almost what I want except I can't make it visible again without posting back.
So now I'm debating putting the whole thing inside of an ajax call so I don't have to refresh the whole page, but I'm not sure that would work either.
Is this even possible, or does anyone have any suggestions?
I appreciate any help anyone can offer.
Thanks
You can try span{position:absolute}
Use js instead of css.
If you use css then it'll also create problems on responsive.
You can use bootstrap tooltip or simple jQuery
https://jqueryui.com/tooltip/
what you can do is, give that div an id, and through css hover, set the tooltip's display to block,
or you can use, javascript for this, regidter those divs with a on hover, function , check the target of the hovered element, if it matches with that one, set tooltip's div display property to block,,simple
I have this component here and i want that whenever i click on the div content showing the hidden div gets triggered and show the hidden form. I have done that but now i also need to hide the div of that content that was showing when i trigger the hidden div and show that hidden div in place of that particular div but not under all divs. All other content should just remain as it is. Can any one help me? Here is my component
Example Component
An edit is made to the example component.
Find the link posted below
https://stackblitz.com/edit/so-list-lj18vu?file=src/app/app.component.ts
You need to add a flag to each and every item, on click of an item you need to make all the items flag as false and that particular item flag as true
Then it works as expected.
Happy Coding :)
I'm trying to figure out where an element's location is being computed, like hovering over the element's line of code in the code window so that the margin, padding, etc, are shown. Is there a way to do this for pseudo-elements?
Edit: What I should say is I want to see something like the metrics, properties, etc window for pseudo-elements :before and :after. All I really want is to see their location on the screen.
Support for before/after elements is coming very soon! You should have it within the next month or so on Canary!
Yes, there is a way to force an elements state using chrome devtools; if you look on the right side you should see an icon that looks like the cursor with a broken box behind it on the 'styles' tab.
When you click on it, it will have a dropdown menu that will allow you to toggle the selected code's hover, active, focus and visited pseudo-classes.
I have this menu that when I hover on certain items, it dropsdown a list of new items. Sometimes this list is bigger than the browser window, so user need to scroll the page down to be able to see the whole list. The problem is that when the mouse reacher the scrollbar naturaly the menu lose it's hover function. I need to fix that asap, any suggestions?
Thanks.
Instead of doing hover on the menu item, maybe you should do an onclick event. This would allow the menu to appear on click and then when the user clicks the menu again it could make the sub-menu hide. This would allow you to scroll down the page and still have the sub-menu showing.
BTW, this assumes you cannot break the menu down into sub-menus like Nathan MacInnes mentioned.
Well if the user has to move the mouse off of the menu, it naturally should close. Maybe you should try making the menu shorter, or try making the menu itself scroll?