I am trying to get the Bootstrap3 nav dropdown to trigger a collapsible div at the same time it displays the dropdown - basically to 'simulate' a fullwidth subnav bar:
$('.dropdown').on('show.bs.dropdown', function () {
$('#collapseExample').slideDown('normal');
});
$('.dropdown').on('hidden.bs.dropdown', function () {
if (!$('div.dropdown').hasClass('open')) {
$('#collapseExample').slideUp('normal');
}
});
http://codepen.io/anon/pen/myRgbQ
I have 'almost got it working but it behaves strangely when there is already one subnav open...
I'm sure it would be a quick fix, but I'm stumped! Any help would be greatly appreciated!
Try this code:
$('#collapseExample').collapse(true);
$('.dropdown').on('show.bs.dropdown', function () {
$('#collapseExample').slideDown('normal');
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
$('.dropdown').on('hidden.bs.dropdown', function () {
if (!$('div.dropdown').hasClass('open')) {
$('#collapseExample').slideUp('normal');
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
}
});
Related
i am building a responsive navbar that is fixed to the top.
I got it working so that if you click the menu icon the navigation slides up and down using jQuery's .slideDown(). And also slides up when you click a menu item in the dropdown navigation.
var toggle = false;
$(document).ready(function () {
"use strict";
$("#menu").click(function () {
if (!toggle) {
$(".nav-menu").slideDown(function () {
$(this).toggleClass("nav-expanded").css('display', '');
});
toggle = !toggle;
$("a.menu-link").click(function () {
$(".nav-menu").slideUp(function () {
$(this).toggleClass("nav-expanded").css('display', '');
});
toggle = !toggle;
});
} else {
$(".nav-menu").slideUp(function () {
$(this).toggleClass("nav-expanded").css('display', '');
});
toggle = !toggle;
}
});
});
You can see a Demo here.
However the problem is this: The menu button toggles the sliding as it should but clicking the menu items only slides the menu up once. After that the menu button still works but the sliding via click on menu item doesn't.
Thanks for all help in advance.
I changed your JS a little bit:
$(document).ready(function () {
"use strict";
$('#menu').click(function(e){
var navMenu = $(".nav-menu");
if($(this).hasClass('nav-expanded')){
navMenu.stop(true,false).slideUp();
} else {
navMenu.stop(true,false).slideDown();
}
$(this).toggleClass('nav-expanded');
});
$(".nav-menu ul li").click(function(e){
var target = $(e.currentTarget);
var menu = $('#menu');
menu.trigger('click');
});
});
Link to fiddle
jQuery is still a learning process for me, but I have an accordion script here and I am looking to add a close icon to each toggle menu that will close the toggle once it has been opened, however I can't seem to get it to work. Thoughts?
FIDDLE
$('#main').each(function () {
var $accordian = $(this);
$accordian.find('.view-m').on('click', function () {
$accordian.find('.mobile-content-body').slideUp();
$accordian.find('span').css('transform', 'rotate(0deg)');
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(90deg)');
$(this).next().slideDown();
$accordian.find('.close').slideToggle(500);
}
});
});
You need to replace:
$accordian.find('.close').slideToggle(500);
->
$accordian.find('.close').click(function() {
$(this).parent().slideUp(500);
});
Or
$accordian.find('.close').on('click',function() {
$(this).parent().slideUp(500);
});
JSFiddle
I created jquery dropdown menu like this. I want to add slide effect on drop down menu. At the same time if I am placing my mouse over my menu tab the sub menu was opened now it is looking like one step up compare to the menu tab. I need slide like this. I here added my script.
function mainmenu() {
jQuery(" #na1").hover(function () {
//alert("hai-2");
jQuery(this).find('#content1').slideDown("fast");
}, function () {
jQuery(this).find('#content1').slideUp("fast");
});
}
$(document).ready(function () {
mainmenu();
});
Thanks in advance
$(document).ready(function () {
$("#na ul li").hover(function () {
$(this).siblings().find('ul').slideUp(400);
$(this).find('ul').slideDown(400);
}, function () {
$(this).find('ul').slideUp(400);
});
});
Demo:
http://jsfiddle.net/QkbDg/1/
Try this
$(document).ready(function () {
jQuery("#na ul li a").hover(function () {
jQuery(this).next('ul').slideDown(350);
}, function () {
jQuery(this).next('ul').slideUp(350);
});
});
DEMO
Try this:
function mainmenu(){
jQuery(" #na1").hover(function(){
jQuery(this).find('#content1').stop().slideDown("fast");
},function(){
jQuery(this).find('#content1').stop().slideUp("fast");
});
}
$(document).ready(function()
{
mainmenu();
});
Try this
function mainmenu(){
jQuery(".topm").hover(function(){
//alert("hai-2");
jQuery(this).find('.content').stop().slideDown("fast")
},function(){
jQuery(this).find('.content').stop().slideUp("fast");
});
}
$(document).ready(function()
{
mainmenu();
});
Demo : here
$(document).ready(function () {
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(220);
},
function () {
//hide its submenu
$('ul', this).slideUp(220);
}
);
Hello,
I want to set a "delay" on my dropdownmenu, because the respond time is too fast. When I accidently hover 4times in a row(it slides up and down al the time).
I read and tried the HoverIntent jquery plugin. But I am not able to implement it with this easy jquery menu.
Is there anybody with such experience?
I would really be thankful, I tried to implement it but without success (I am bad at jquery). Please give some hint/code, thank you!
You have to stop the currently running animation. Try this,
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).stop().slideDown(220);
},
function () {
//hide its submenu
$('ul', this).stop().slideUp(220);
}
);
Try the following to prevent the hover function firing to many times.
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).stop().slideDown(220);
},
function () {
//hide its submenu
$('ul', this).stop().slideUp(220);
}
);
I'm doing animated menu with jQuery (3 levels). I'm using efects slideDown and slideUp. Sometimes (but no always), when I open submenu of first main item, submenu of second main item won't work until I refresh the page. It works OK with efects fadeIn and fadeOut, but I want to use slide.
Here is my code: http://jsfiddle.net/mcCAx/
The problem was the styling on your <ul class="SubStage"> element was being overridden. So, fight fire with fire by re-overwriting the styling in a callback. Your side menu shows up every time. :)
$(document).ready(function()
{
$('li.MainStage').hover(
function()
{
$(this).find('ul.SubStage').slideDown('slow',function(){
$(this).parent().find('ul.SubStage').css({overflow:"visible"});
});
},
function()
{
$(this).find('ul.SubStage').stop().slideUp('slow');
});
$('li.SubStage').hover(
function()
{
$(this).find('ul.Sub2Stage').slideDown('slow');
},
function()
{
$(this).find('ul.Sub2Stage').stop().slideUp('slow');
});
});
Check it out here.
This fixed it for me Here
$(document).ready(function()
{
$('li.MainStage').hover( function()
{
$(this).stop();
$(this).find('ul.SubStage').slideDown('slow');
}, function()
{
$(this).stop();
$(this).find('ul.SubStage').slideUp('slow');
});
$('li.SubStage').hover( function()
{
$(this).stop();
$(this).find('ul.Sub2Stage').slideDown('slow');
}, function()
{
$(this).stop();
$(this).find('ul.Sub2Stage').slideUp('slow');
});
});