I have a horizontal animated menu that has a strange behavior because it works fine only first time, after that the expandable menu is not animated and I don't understand why the
ul#nav ul{display:none;} is not applied any more... this is jQuery function that I use for animation.
function mainMenu(){
$('ul#nav').find('> li').hover(function(){
$(this).find('ul')
.stop(true, true)
.slideDown('slow');
});
};
Maybe this will work:
function mainMenu(){
$('ul#nav').find('> li').hover(function(){
$(this).find('ul')
.stop(true, true)
.slideDown('slow');
}, function(){ $(this).find('ul').hide(); });
};
the problem is that the first time you have your <ul> hidden so it's working just fine. After slideDown(), the <ul> becomes visible but when you move your mouse, you just change the left attribute, not the display. Basically, the <ul> is already visible so slideDown is not working.
Related
I've created a fiddle
http://jsfiddle.net/d9wf1s44/
When I click the hamburger menu, the breadcrumbs toggles away to right, and after that the function executes which shows the menu.
$menu_toggle.on('click', function(e){
e.preventDefault();
$(this).toggleClass('open');
breadcrumbs_bar.toggle('slide', {direction:'right'}, 800, function(){
$navigation.fadeToggle(600);
});
});
Now the issue is that when I click again, naturally, the same thing will happen, the breadcrumb will toggle and menu will fade out. It's just that I'd like first the menu to fade out, and then the menu to toggle in. How can I do that? animate is used for css manipulation and I tried doing everything with css transitions and delay, but couldn't achieve the nice result like here, I like the toggle animation that the breadcrumbs has, so that's why I'm using toggle (also the breadcrumbs get display none, so the menu is right next to the icon).
How can I control what happens on second click? How to separate this?
You have to make alternate animation for close the menu
after you toggle class "open", you have to do as below :
if($(this).hasClass('open')){ //open function
breadcrumbs_bar.toggle('slide', {direction:'right'}, 800, function(){
$navigation.fadeIn(600);
});
}else{
$navigation.fadeOut(600, function(){
breadcrumbs_bar.toggle('slide', {direction:'right'}, 800)
});
}
you can check my jsfiddle demo http://jsfiddle.net/euds0n6x/
I have a menu that is hidden from view (for mobile) using CSS:
#filter-column {
position:absolute;
left:-400px;
}
When the user clicks a link I want to hide everything else except that menu which will slide in from the left. I want the reverse to happen when the layer is closed.
I have the following jQuery:
// Show/hide filters on mobile //
$("#openMobileFilters").click(function(){
$("#filter-column").animate({left:'0'},600).css('position', 'relative');
$('#results-container, #footer').addClass('hidden-xs');
});
$(".closeFilters").click(function(){
$("#filter-column").animate({left:'-400px'},600).css('position', 'absolute');
$('#results-container, #footer').removeClass('hidden-xs');
});
The problem is when I click to hide the menu the content shows before it is actually hidden. Is there a better way of doing this?
Without seeing this in action in a fiddle, I can only suggest you move the removal of the hidden class to the complete function of animate
$(".closeFilters").click(function(){
$("#filter-column").animate({left:'-400px'}, 600, function() {
$('#results-container, #footer').removeClass('hidden-xs');
}).css('position', 'absolute');
});
Currently, you are showing the content while the animation is going on which is why you see the content right away.
you have to put the code you want to be executed after the animation in the complete callback .. for example:
$("#filter-column").animate({
left:'-400px',
complete: function() {$('#results-container, #footer').removeClass('hidden-xs');}
}, 600)
I've been stuck on this particular problem. I would like to use a toggle menu for mobile widths on a website that I'm working on. Basically, it works nicely as I can show you on this CodePen.
The code for showing/hiding the menu via a toggle button with JavaScript works below.
$(document).ready(function() {
//Menu Open Seasame Action
$('.site-nav-btn').click(function() {
$('.site-nav ul').slideToggle('fast');
$(this).find('span:hidden').show().siblings().hide();
});
//Hide site-nav content.
$(".site-nav ul").hide();
});
My problem is that I would like to hide the toggle button and the toggle function when the width exceeds say, 480 pixels wide but keep the site-nav ul visible. I've been trying to do this via this code combined with the one above, and somehow it just doesn't work.
$(function() {
if ($(window).width() > 480) {
$('.site-nav-btn').css('display','none');
$('.site-nav ul').show();
}
else {
$('.site-nav-btn').css('display','block');
$('.site-nav ul').hide();
}
});
I'm not really that proficient in JavaScript so if anyone could point out why it didn't work alongside the solutions that would really be helpful.
Attach your checking function to $(window).resize() and fix the selectors. See this fork of your CodePen.
I have a CSS3 Navigation Menu with no Javascript, I like how it is right now but there is one problem and the users are getting bothered with it.
The problem is that when a user hover over a Menu Link the submenu pops up which is exacly what I want but If user move the mouse arrow away from the submenu or the menu link, its dispairs ULTRA fast. It's very annoying and I have no Idea how to fix this, there is two solutions one way is to always show the submenu the other solution is that when a user hover out from the submenu the submenu should atleast wait 5-10 secs before disappearing and also if you hover out and hover back the submenu should stay. But I have no idea how to do it.
Here is the code and example try it out, any solutions is appreciated!
http://jsfiddle.net/nPdNd/ expand the result window in Jsfiddle to see the whole nav menu
Thanks in advance!
Example: http://jsfiddle.net/nPdNd/40/
Using jQuery
$(document).ready(function(){
var clearli;
$(".test").hover(function() {
clearTimeout(clearli);
$("ul#nav li").removeClass('current');
$(this).addClass('current');
}, function() {
var getthis = $(this);
clearli = setTimeout(function() {
$(getthis).removeClass('current');
}, 500);
});
});
Changed CSS
ul#nav li:hover > ul { to ul#nav li.current > ul {
ul#nav li:hover > ul li a { to ul#nav li.current > ul li a {
EDIT: I changed the selector due to a bug to .test and added class test to the <li>
EDIT2: I feel stupid, I forgot to stop the timeout counter. Edited above.
Multiple solutions exist to address your problem:
Use css-transitions to delay disappearance of your submenu (you mentioned in chat that you don't have access to stylesheets... maybe try using inline styling? It's not the best idea, but maybe you can live with it):
http://www.w3schools.com/css3/css3_transitions.asp
https://developer.mozilla.org/en/CSS/CSS_transitions
http://www.w3.org/TR/css3-transitions/
If you have jQuery, you can use .animate() to do
the same thing:
http://api.jquery.com/animate/
Take a look at .stop() too:
http://api.jquery.com/stop/
If all else fails, you can try playing around with setTimeout();
https://developer.mozilla.org/en/DOM/window.setTimeout
http://www.w3schools.com/js/js_timing.asp
this is ONLY an example - http://jsfiddle.net/nPdNd/22/
i would suggest you experiment yourself, until you get a desired result
this example is based on mouseenter/mouseleave events:
$("#nav li").mouseenter(function(){
$(this).children('#sub').show("slide", { direction: "up" }, 300);
});
$("#nav li,#sub").mouseleave(function(){
$(this).children('#sub').hide("slide", { direction: "up" }, 300);
});
it is also uses JQuery UI
Hop, here is your jsfiddle modified: http://jsfiddle.net/Ralt/nPdNd/25/
Now, as you can see, it's far from perfect. You shouldn't change the style property, but rather add then remove a class, but you get the idea of how to do that.
Please add this script in you page , This is easy way
Step 1-
Add comon jquery in you page
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Step 1-
Add this script in your page -
<script type="text/javascript">
jQuery(document).ready(function() {
$('ul#nav li').hover(function()
{
$(this).find('ul').stop(true,true).slideDown()
},
function()
{
$(this).find('ul').stop(true,true).slideUp()
});
});
</script>
I do have little changes in your css
Demo http://jsfiddle.net/nPdNd/28/
your code (li:hover)not work ie6 , did u check it ?
Check it.... http://jsfiddle.net/lakshmipriya/nPdNd/31/
Is this speed is ok for you....
CSSS transitions would be the only way to do this with only CSS. Simply set the transition-delay, then no CSS change will take effect until the delay clock is done. The only problem with this is IE, which does not support CSS transitions.
https://developer.mozilla.org/en/CSS/transition-delay
Other than this you will need to resort to JavaScript based menus, implementations of which can be found all over the internet.
I'm trying to make an accordion-like menu with jQuery, but it refuses to cooperate: http://jsfiddle.net/vrcpK/1/
Here is my JavaScript:
$('#submenu div.submenu').hover(function() {
$('.submenu-head', this).addClass('visible');
$(this).siblings().each(function() {
$('div.submenu-body', this).stop(true).slideUp('slow');
$('p.submenu-head', this).removeClass('visible');
});
$('div.submenu-body', this).stop(true).slideDown(500);
}, function() {
$('.submenu-head', this).removeClass('visible');
$('div.submenu-body', this).stop(true).slideUp('slow');
});
When you hover over an item twice, the menu dies and slowly shrivels up. After that, it lethargically reveals a third of the content.
I suspect it is a problem with my .stop(true) calls, but I can't figure out any other way to keep the menu from becoming gelatin after moving the mouse over it.
Any help would be greatly appreciated!
Seems like the height is set to whatever it is when hover out... try reseting the height to auto when the slide up is complete...
$('div.submenu-body', this).stop().slideUp('slow', function() {
$(this).height('auto');
});