Adding jquery effect to dropdown menu and aligning dropdown menu exactly below Hover tab
Tag : jquery , By : fedorafennec
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further Try this below code with your fiddle. Modify the below code with what ever kind of animation you want. Take reference from .animate. $('#coolMenu .pink p a').mouseover(function() {
$('#coolMenu .pink ul').animate({
height: ['toggle'],
opacity: 0.75
}, 3000, function() {
$('#coolMenu .pink ul').css('display', 'block');
});
});
|
Date : March 29 2020, 07:55 AM
wish of those help I don't think you need all of that code just to make it drop down on hover, I did the same using this jQuery its worked fine for me and much simpler. $(document).ready(function() {
$('.navbar-default .navbar-nav > li.dropdown').hover(function() {
$('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
$(this).addClass('open');
}, function() {
$('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
$(this).removeClass('open');
});
});
|
Need jQuery menu to slide down on first hover and hovering on other menus just show it's div and no need of slide down e
Tag : jquery , By : Piotr Balas
Date : March 29 2020, 07:55 AM
around this issue Try this, solution is for home menu only, you will need to add if condition in rest of all hover events. $('.home').hover(function(){
if($('.container-2,.container-3,.container-4,.container-5,.container-6,.container-7,.container-8').is(":visible"))
{
$('.container-2,.container-3,.container-4,.container-5,.container-6,.container-7,.container-8').hide();
$('.container-1').show();
}
$('.container-1').slideDown(750);
});
|
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further I'm doing something slightly different to what i've seen work, many people have done it so there dropdown is part of a child list. However i'm trying to work with a sibling dropdown menu. , Try this var isSiblingHovered = false;
$('.dropdown-hover-toggle').hover(function () {
$(this).siblings('.dropdown-menu').slideDown();
},
function () {
var current = $(this);
setTimeout(function(){
if(!isSiblingHovered){
current.siblings('.dropdown-menu').stop().slideUp();
}
}, 50);
});
$('body').on("mouseleave", ".dropdown-menu", function() {
isSiblingHovered = false;
$('.dropdown-menu').stop().slideUp();
});
$('body').on("mouseenter", ".dropdown-menu", function() {
isSiblingHovered = true;
});
|
Date : March 29 2020, 07:55 AM
it helps some times The solution you found in here is usefull, this javascript code maybe can help: $(document).ready(function(){
$('.menu li').hover(
function () {
$('.sub', this).stop().slideDown(650);
},
function () {
$('.sub', this).stop().slideUp(650);
}
);
});
/*$('ul >li').hover(function() {
clearTimeout($(this).data('timeout'));
$('li > ul').slideDown('fast');
}, function() {
var t = setTimeout(function() {
$('li > ul').slideUp('fast');
}, 650);
$(this).data('timeout', t);
});*/
li{
list-style-type:none;
display: inline-block;
position: relative;
padding: 20px;
background-color: #08c;
}
li ul li{
min-width:200px;
}
li ul{
margin:0;
padding:0;
position: absolute;
top: 100%;
left:0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
<li>Page A</li>
<li>Page B
<ul class="sub">
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
</ul>
|
Boards Message :
Related QUESTIONS :