When in the responsive/mobile view of www.rohiniartstudio.com
When I click on the menu, the menu flickers on collapsing and displays the content below the menu.
On default it was taking about 1-2s before it shows the menu items then added this code:
.collapsing
{
-webkit-transition: none;
transition: none;
display: none;
}
Can someone help me out with the flickering issue?
Please visit the site and let me know?
Try removing the # value from the data-target property
Set as data-target="site-navigation".
You can't use display property when you want to make an animation with transition. The element and all the positions should be countable by CSS.
Refer: https://stackoverflow.com/a/38772750/9218664
If you want to make an animation on the mobile accordion menu you should use max-height property without display.
You can see how it happens here; https://codepen.io/volcanioo/pen/LYGaJdV
Related
On our website, when we move the mouse over the mega menu, it disappears immediately.
I would like it to go away after 200-300ms because in the mega menu we have a form, when someone clicks on "hint" - the menu will disappear before selecting it.
#media (min-width: 1025px){
.elementskit-megamenu-has .elementskit-megamenu-panel {
transition: 300ms !important; //your desired time in milliseconds
}
}
So far we have tried with the above code but unfortunately it won't help.
Depends what is the CSS that is applied when the mega menu panel is going invisible.
If it is display: none; to display: block;, and vise versa, I'm pretty certain that you can't apply transition effects to the display property.
If you can share your website for further investigation would be very helpful.
I'm building an accessible accordion using a definition list. I have this working well, where the <dt> contains a <button> which when clicked toggles an aria-expanded from true/false and toggles a hidden attribute on the corresponding <dd>. There's other things going on for accessibility but that's the basics for the list and the show/hide.
The show/hide display of the dd is then controlled via a hidden attribute selector (in this case, this is coming from the bootstrap stylesheet):
[hidden] {
display: none!important;
}
The show/hide functionality right now is a hard show/hide and I'm trying to add a nice animation via css transitions (this needs to work in IE11 where transitions are supported.)
I built a simple POC for the animation at http://jsfiddle.net/jokvqy6u/ which just toggles a show and hide class. This was just something I could quickly throw together and send out to our marketing team to illustrate the animation to get feedback on.
I thought I'd be able to just easily add hidden and :not(hidden) selectors to the POC and it would work just fine, then I could retrofit into the real accordion, but the animation doesn't seem to work with hidden attributes on the html. You can see a demo of that at http://jsfiddle.net/6zmdhqrn/2/ where the 2nd item animates because it does not have a hidden attribute. Items 1 and 3 have hidden attributes and do not even open up.
Does anyone know why this is happening and how I can get my transitions working with hidden attributes?
EDIT I have it sort of half working at http://jsfiddle.net/6zmdhqrn/3/ by overriding the [hidden] selector coming from bootstrap with some important statements. I still get a hard show, but the hide slides up. I suspect it has to do with the element being display:none where the animations have no dimensions/info to start animating from? Still looking for info/tips on how to get the opening animation.
You guessed right, the problem here is display isn’t an animatable CSS property.
You need to base your animation on an animatable property, such as opacity for example.
Here’s a quick demo:
const el = document.querySelector('div');
document.querySelector('button').addEventListener('click', () => {
if (el.classList.contains('visible'))
el.classList.remove('visible');
else
el.classList.add('visible');
})
div {
opacity: 0;
transition: opacity 0.3s ease;
}
.visible {
opacity: 1;
}
<div class="visible">some content!</div>
<button>toggle visibility</button>
As you may have noticed, setting the opacity to 0 doesn’t hide the element completely (i.e. it still takes up space). In case this is something undesirable, you may consider animating a different property, such as width or height.
Recently, I created a navigation bar and transformed the menu items into a parallelogram using -webkit-transform:skew(-30deg); and the tweaks of the community.
Now, I tried fixing the dropdown menus with the CSS class .submenu.
This is my progress so far: http://jsfiddle.net/an5mb2y3/1/
But there are some bugs I could not fix:
Font smoothing: When I hover over the dropdown menu items, the font gets blurry. After another second, the font gets clear. I read about using -webkit-font-smoothing: antialiasedto fix this, I tried it and had no success.
Also, the dropdown menu gets displayed in the background, behind the embedded image. I want to show the menu on a top layer of the image. What I tried was changing the z-index to a bigger value. But it did not work.
I want to display the submenu from the position where the parallelogram starts while hovering. I tried margin-left: 42px; on the .submenu class, but this doesn't work for both dropdown menus at the same time.
Add this CSS dropdown menu up:
nav.nav-primary{z-index: 1; position: relative;}
I'm working on iphone like slider. It is <input type="range"> tag with button for sliding. When I'm moving the button to the end lock picture on the button must be changed to unlock picture. For this I'm changing background of the button from picture with lock icon to picture with unlock icon (both in one sprite pic). Like this:
$('.btn').css({'background-position': '-62px -104px'});
But for some reason picture not just changes, it's like sliding to the right and disappears and from left side coming the new picture instead. Strange animated effect. And I can't find the reason for this strange behaviour.
Can anybody explain to me why s it and what can I do?
I'm not sure, but maybe it will help: slider uses Zepto js instead of regular jQuery.
It sounds like you have css transitions active on the .btn element. That would cause the background image to transition over with a sliding effect.
Try adding the following css to the element:
.btn {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
Beware that this may have unintended consequences if any other part of your code relies on transitions being active.
See here for more information http://www.w3.org/TR/css3-transitions/#transition-shorthand-property
Try for example this:
$('.btn').css({'background-position': 'old position'}).hide();
$('.btn').css({'background-position': 'new position'}).show();
In the below image my drop down menu is not displaying over the content.It is very transparent know.Can anyone help me what I have to add to make this drop down menu un-transparent.
Your dropdown is probably a div in the html dom. You could find the name of that `div' and then apply a background to it using css:
.dropdown_div_name { background-color: white; }
Edit:
Re looking at the image you posted it is most probably a problem with the z-index as others also suggested, since for example if you look at the 'Technology/Connected TV' header, that shows over the menu contents. That could be fixed by changing the z-index of the dropdown menu
.dropdown_div_name { z-index:100; }
where 100 should be a number bigger than the z-index of the rest items that you want it to overlap
A background-color. Without one, the default colour is transparent, hence you see everything behind it.