Okay, so I'm making a responsive navigation out of pure CSS (using a tutorial). The way it works is, when you're viewing the responsive (condensed) menu, the "Menu" button has a hidden checkbox input assigned to it. When the checkbox is checked, the navigation ul#menu (set to display:none; in mobile view) gets set to display:block like so:
input[type=checkbox]:checked ~ #menu {display:block;}
I also have a span with an arrow icon for menu items with submenus that rotates to point down when you hover over the li with the submenu.
<li class="dropdown">Link with Submenu<span class="arrow">></span></li>
.dropdown:hover .nav-arrow {transform:rotate(90deg);}
Standard stuff.
I didn't like the "hover" attribute displaying the submenu in mobile view, so I converted those to checkboxes as well. So tapping the li items will trigger their own checkboxes to display the submenu ul beneath them.
input[type=checkbox]#show-menu:checked ~ .sub-nav {display:block;}
The problem I can't seem to figure out now is how to get the submenu arrows to rotate down when you tap(check) the submenu link.
I've tried moving the input both above and below the li with the arrow (using both checkbox:checked + .nav-arrow and checkbox:checked ~ .nav-arrow respectively), but nothing seems to work.
Does anyone have any ideas of how to appropriately select the span with the arrow after the checkbox is checked? Appreciate it!
As a quick side note, I'm not JavaScript/jQuery savvy, and the point of this is to avoid using it, so any solutions negating those languages would be preferred. :)
Edit: Here's a js fiddle of my exact html/cs setup:
http://jsfiddle.net/nL3cd9mg/
Thanks for your responses so far, I hope the fiddle helps. :P
Ah! I finally got it. Simple solution I overlooked, as always. I just became more specific with my selectors:
input[type=checkbox]#show-cl-menu:checked ~ .show-cl-menu .nav-arrow {
instead of the old
input[type=checkbox]#show-cl-menu:checked ~ .nav-arrow {
Thanks everyone for your input!
If the issue is the actual rotation animation, try something like:
.subnav {
transition: transform .5s;
}
input[type=checkbox]#show-menu:checked ~ .sub-nav {
transform: rotate(90deg);
}
Obviously you'll need to change precisly what that is applied to fit your exact situation. Your question has no html so I can't be more specific to your situation. But you can see the parts that work together to get that rotating arrow effect.
Related
I'm building a menu with an "indicator" just like this codepen: https://codepen.io/jnowland/pen/XmQGNx
Everything works perfectly except for one little tiny detail: When the link is clicked and that page loads, the indicator animates from the previous child before settling on the link that just became .active. This can't be seen in the linked example, only the hover effect. This is a screen recording of my menu (sorry for the low gif framerate):
You can see how the hover works perfectly but note how the transition jumps from the menu item before after a link is clicked and that page loads. I don't want a transition here. How can I prevent that? My code looks almost exactly the same as the codepen for the parts that control this so please refer to the code in the link.
.Nav-item {
&:last-child {
&:before, &:after {
content: '';
display: block;
position: absolute;
pointer-events: none;
transition: left #{$transition-speed} ease;
}
My initial thought was deleting the transition from this part but it messes up the whole transition so it has to stay.
.Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:before
{
left:($width*$i)+($width/2)-$width;
.Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:before{
left:($width*$i)+($width/2)-$width !important;
}
Adding the transition inside these two and delete from the first code block doesn't seem to be the right way to go either.
After days of trial and error I accidentally jumped over what I now think is why the menu is persistent and displays this error:
On page load, the tool I work with (MonoSolutions) adds a separate li item first in the list for the swipe menu close button, but it is set to hide for all screen sizes above mobile. This hidden state takes a fraction of a second to load and just before that happens, all nth-child(#) is one step behind. The unwanted transition is seen when the first list item hides.
Note: The code is probably correct, if you'd work outside a stupid WYSIWYG editor.
I have CSS(HTML) horizontal menu and everything is working properly, but when i touch with the mouse one of the menu "listing" is appear, but i want to make it clickable.
I try almost everything in this row:
.main-nav-ul li:hover ul {
display: block;
}
But without success...
I`m using Joomla and custom HTML CSS Javascript module.
I use this code:
https://github.com/shahbokhari/webdev/blob/master/Vertical-Drop-Down-Navigation-2015%202/vertical-drop-down-navigation-using-html-css-2015.html
I want when i click on ЧАСТИ ЗА LED ТАБЕЛИ to be able to see sub menus in this category.
With css you can only handle hover(mouse enter and mouse out). to handle click you should use javascript:
$('.main-nav-ul li').click((e)=>{
$(e.target).closest('li').toggleClass('toggled');
});
it will toggle (add/remove) toggled class of li element, when it's clicked.
then you should replace li:hover to li.toggled in css , to apply toggled styles when li has toggled class.
you can see this in codepen
I have created this CSS drop down menu. The menu works flawless as it should, my only question
is how can I get the sub menus to stay open and not instantly disappear when the mouse is removed off of them?
My code is at this link,
http://fiddle.jshell.net/NJ4UP/
I have tried several things but nothing is seeming to do what I want. I would prefer not to use J-Query or JavaScript, as I'm not that familiar them, but any help will be greatly appreciated!!
All I want and need is for the sub-menus to not instantly disappear if the mouse is not hovering over them. I was thinking a timeout option or something that sets it to close after a predetermined amount of time (ie 5 seconds) or another menu or link is clicked.
Thanks in advanced.
In CSS you may expand area that covers <li> when hovered with a pseudo element : DEMO.
li:hover:before {
content:'';
position:absolute;
width:100px;
height:200px;
background:rgba(0,0,0,0.01);/* not 100% transparent, so it gets the mouse over */
}
In CSS you may delay transition to close your menu DEMO.
do not use display to hide/show the submenu
Use a rule that handles number value.
#menu ul > li ul {
position:absolute;
margin-left:-9999px;
transition:0s 0.5s;/* stay open 0.5sec before to hide again */
}
#menu ul > li:hover > ul {
margin:0;
transition:0s 0s;/* show ! don't wait */
}
You could check this out, maybe it helps:
http://www.w3schools.com/css/css3_transitions.asp
In CSS you may use the experimental rule pointer-events and HTML tabindex attribute .
pointer-events to control mouse events hover <a> in <li> first level.
tabindex for <li> first level , so it can be focused via click & tab.
The idea is:
to shortcut the click events on so <li tabindex="0"> can take the :focus and apply
same rule as :hover.
then once <li> has focus , to give back to ability to receive mouse events.
DEMO - CSS click open/close menu
it alows to open close menu via the key tab
At the moment i believe it is better to set a class instead tabindex and use javasript to toggle class on click , or at least to keep the :hover rule effective.
It can be done somehow for a two level menu too
Referencing this fiddle
I want to color the background of the LI being hovered over. However it seems to set the class on the entire set of LI elements (not just the hovered one).
Can someone see what the issue is here?
just do this:
.parentSelectorBox li:hover
{
background-color:red;
}
you don't need js to achieve hover effect. CSS will be fine.
This is because you anchor your JS to the whole list.
See that.
I don't remove all JQuery stuff, but only what set to hover your li class.
I suggest to remove JS that know is useless
Ignoring internet explorer 6 and latter, how do I script the css to achieve the following results:
It would hide the information until UpgradeI, UpgradeII or UpgradeIII is hovered. Site link is Here
There is around 500 pages like that, so tweaking or adding javascript in the html is not feasible. I think CSS is the way to go to do this, but I've tried:
div.UpgradeI {display:none;}
div.UpgradeI:hover {display:inline;}
but it just hides everything and doesn't show the information when hovered. Anyway, if its not possible to achieve the same result using css only, please show me what code to add. Thanks!
Okay, it's possible to do this with CSS. First of all, those styles you suggest don't work because if it starts out with display:none, there is nothing to hover on for the next style to kick in.
I was able to add this to your site with Firebug:
div.UpgradeI,
div.UpgradeII,
div.UpgradeIII {
height:20px;
overflow:hidden;
}
div.UpgradeI:hover,
div.UpgradeII:hover,
div.UpgradeIII:hover {
height:auto;
}
That is the ugliest hack in history, but it achieves the desired effect without changing the HTML or adding Javascript. The paragraph below doesn't slide up because everything is positioned absolutely. If you start using float styles for everything else, though, it'll work.
Obviously, you can edit the height to show more/less of the div as necessary.
It would be hard to do it with only css. Because once you set the element style to display:none, it's not possible to catch the :hover event by the element.
I would suggest to use jquery to create a place holder element at the empty place. When the mouse hover over this element, then display the alternative "real" element.
you can try this plug in to see if you like it.
http://cherne.net/brian/resources/jquery.hoverIntent.html
UpgradeI table, UpgradeII table, UpgradeIII table {
display: none;
}
UpgradeI table:first-child, UpgradeII table:first-child, UpgradeIII table:first-child {
display: inline;
}
UpgradeI:hover table, UpgradeII:hover table, UpgradeIII:hover table {
display: inline;
}
By the way: Your markup is painfully.
This works on Firefox 4.0 (and probably Firefox 3.0, Chrome, Safari, etc; though I did not test on them). This definitely won't work on IE6, because IE6 does not support :hover on arbitrary element, :nth-child() selector, and the sibling selector (~):
div.UpgradeI table:first-child ~ *:nth-child(n+3), div.UpgradeII table:first-child ~ *:nth-child(n+3), div.UpgradeIII table:first-child ~ *:nth-child(n+3) {
display: none;
}
div.UpgradeI table:first-child:hover ~ *, div.UpgradeII table:first-child:hover ~ *, div.UpgradeIII table:first-child:hover ~ * {
display: block;
}