Prevent menu animation transition on page load - html

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.

Related

CSS psuedo:element hover effect is not working correctly

I'm using CSS to ease-in-out some text when a particular psudeo:element is hovered.
The code below is selecting the parent of the .description element I want to show on hover, however the hover effect is happening before I want it to.
.grid-item:hover .description {
visibility: visible;
opacity: 1;
}
When the cursor is a few centimetres above the parent element, the hover state is triggered. I believe this may be a problem with the padding/margins of this element. I've tried many things with no luck.
Here is the full code.
Gently hover a little bit over each image to understand the problem.
You just need to change the CSS selector that shows the text on hover. At the moment, it is triggered when the parent of .image (i.e. .grid-item) is hovered. Instead, if you set it as follows, it will be triggered when the div containing the image is hovered.
.image:hover + .description {
visibility: visible;
opacity: 1;
}
Here's the updated pen: https://codepen.io/anon/pen/WEWmEw?editors=1100
#Jordan Miguel, you're right. It's the padding, as well as the content itself.
If you crack open the dev tools for the browser of you choice (I'm using Chrome's in the picture), you can probably find a tool that will show the box model for a particular CSS element. When selecting your element, you can see the padding on the right and left side that trigger hover.
On the left hand pane of the tools, you can see the element selected as well as the stylings that have been applied. From here you can figure out what you'll need to change in order to get the behavior you expect.

Selecting a div before a "checkmark:checked" condition in CSS

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.

CSS menu item does not capture all mouse movements

I am not sure how to best describe the problem I am having here. I got a CSS driven menu online and adapted it to my needs. It works perfectly in all browsers but in IE it appears that the when you move over from the main navigation to the dropdowns list a items, it does not always capture the movement and then "closes" the dropdown.
I suspect that when you move to over to the dropdown that the list a item does is not a block element thus it closes the dropdown, this only happens if you're not moving to the dropdown and not completely over the text of the list a item.
Here is the link: http://www.tepgtests.co.za/decorex/2012/new_site/ - if you move over from "Shows" to "Durban" and not entirely move your mouse cursor over the word but rather over to the dropdown you will see what it does.
Thank you in advance :)
There's a 1px of white space,
hovering that space closes the submenu because your not hovering the menu anymore...
try removing it by moving the submenu just below the menu:
.navigation_bar .first_level_menu_block {
left: 0;
top: 50px;
}
tested in IE9 , it works
It sounds like your CSS is using the inline-block directive, which is not well supported in IE.
I think this answer may solve your problem, rather than repeat it: Inline block doesn't work in internet explorer 7, 6

Text below collapsible dropdown menu is unselectable, and links unclickable

Here's a fiddle showing you a demo of the dropdown menu I've written.
The problem:
Part of the text (the site title link in this case) that is below the dropdown menu ("Channels") is unselectable / unclickable, while the other part below the normal "Home" link is rendered just fine. (You can try that in the demo.)
Why I think this is happening: I use JavaScript to dynamically change the height between 0 and auto values when the menu ("Channels") is clicked; NOT something like display: none;, and hence the menu-item element is only hidden, rendering the text that falls beneath it un-selectable/clickable.
The question is, how do I fix this, without breaking the menu's current functionality and style (i.e. transition for dropdown). Everything I've tried, including display: none | block;, visibility: hidden | visible;, and opacity: 0 | 1; have failed me.
EDIT: As seen in the latest versions of Google Chrome and Chromium web browsers.
It work in FF
For Chrome where for some reason the child element (of #channels-menu-item-wrapper) does not respect the overflow:hidden of the parent use (it respects the hidden in a visual manner only..)
You can use a delayed transition and move the sub-element out of the way ..
.collapse > div{
position:relative;
}
.collapse:not(.in) > div {
left:-10000px;
-webkit-transition:left 0s ease;
-webkit-transition-delay:0.35s; /*same delay as the time it takes to open/close so it does not show*/
}
(i have only added the -webkit- vendor specific rule.. apply for all)
Demo at http://jsfiddle.net/gaby/cfH33/5/
Set .collapse div's height and width to 0 using script when clicking on the menu.
Update: Form the #Gaby answer got this hint ".collapse:not(.in)".
.collapse:not(.in){
width:0;
}
This also will work. http://jsfiddle.net/8Mde7/3/
This is what I meant by setting width:0.

Weird bounding box on header Image link

i'm working On a website for a client, and I've hit a snag. I don't quite know how to fix this one and google searching has done me no help.
I've got a nav as seen on This Site. If you hover over the logo to the top left, it behaves as a link, thus completing my desired goal. But, if you hover a few pixels below the image, no link. No cursor change or anything. Which is good, until you go down beyond that, in which there is a bit of space where you can hover to find the same link as the above image. This is not good, though I can't find a way to remove this without removing the tag, which defeats the purpose anyway. Can anyone help?
Style them correctly.
a {
cursor: default;
}
img {
cursor: pointer;
}
OR (Sass)
a {
cursor: default;
img {
cursor: pointer;
}
}
After a few hours of looking around other people's codes (bootstrap, materialize, etc) I found that changing the position and display values to absolute and inline-block of the link, it would make the link wrap the image. Hopefully this'll help anyone who had this weird problem too.