My dropdown menu currently works fine, but is there a way to change the behavior of the animation if another button on a dropdown menu is clicked.
For example, clicking on a menu button drops down a menu, but while that menu is open, you click on a second button that instead of dropping down like it normally would if none of the menus were open, slides in from the right while the menu that was previously click slides out to the left. Similar to how theverge.com dropdown menu acts.
<div class="menu1">
<div class="menu1Container"><p class="menu1TextContainer">BUTTON1</p></div>
<div id="menu1Dropdown">
</div>
</div>
This is just the basic structure of each menu, which counts up.
Furthermore, this is the jquery that initiates the dropdown
$(function() {
// Dropdown toggle
$('.menu1Container').click(function(){
$(this).next('#menu1Dropdown').slideToggle(100);
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is('.menu1') && !$(target).parents().is('.menu1')) {
$('#menu1Dropdown').slideUp(100);
}
});
});
https://jsfiddle.net/9j3k61rg/8/
thanks
You would need to just set up a condition around your animations that looks to see if the other menu is open. Something like this:
if ($(".menu1Dropdown").css("display") == 'none') {
// do my normal animation to menu 2
} else {
// do some other animation to menu 2
}
Also I notice that you're using slideDown animation. There is no slideLeft or slideRight but you can add that sort of functionality with jQueryUI, or you could use CSS transitions and just use Javascript to add and remove classes instead of setting css properties directly.
Related
I have been working on getting a popup menu on a button.
There are 7 buttons with this menu, on the page in different containers. So far you can click the button and the menu opens.
Each menu opens with its own version of this, which works but not efficient:
$('.country-btn-portugal').click(()=>{
$(".dropdowna").toggleClass('active');
});
$('.country-btn-uk').click(()=>{
$(".dropdowna").toggleClass('active');
});
....etc... x7, one for each button menu.
I have tried to close the menu if an item is clicked but doesnt function with:
//close if menu <a> is clicked
$('#mclose').click(()=>{
$('.dropdown').removeClass('active');
});
And using the following to close the menu if an item that is not this element is clicked (does not work):
$(document).mouseup(function (e)
{
var container = $("#oclick");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
which i was hoping would also fix the issue when 1 menu is open and your next click is another menu, so you have both open.
The menu buttons will be serving separate divs (or card like boxes and are not siblings next to eachother. Hence finding it hard to compact the code. had to give each menu its own click functions.
it is a mess sorry. would be nice to see where im going wrong here.
fiddle --> https://jsfiddle.net/s4nk1zev/118/
html structure for one "card" with one "menu button".
<div class="country_card">
<span class="cc-t goth upperC">Portugal </span> <span class="cc-t goth upperC blued">Visa</span>
<div class="cc-txt">
text in here
</div>
<div class="cc-btn">
<button class="tablabel country-btn-portugal" id="portimg"></button>
<div id="mcontainer" class="dropdowna">
<a id="mclose" class="mclose" href="#home">Overview</a>
<a id="mclose" href="#about">Application Process</a>
<a id="mclose" href="#contact">Investment Options</a>
</div>
</div>
</div>
Well, this is how I would have done that.
Here is the updated fiddle
And this script would do enough
//open menu
$('.tablabel').click(function(event){
$('.tablabel').not(this).next().removeClass("active")
$(this).next().toggleClass("active")
});
//close if menu clicked
$(".dpd").click(function(e){
$(this).toggleClass("active")
})
//close if anything but menu clicked
What it does is, just listen for any click on the button and add active class to the next of it. Removing active class from all the active elements if there is any.
Secondly, you can use a class (as I've added one dpd) on the menue items to detect a click on them to close the open menu.
One more thing. Identifiers must be unique for each element you use. I've also updated them to be unique
Hope that helps
SInce your button and menu tags appear to always be siblings, if you add a common class to all your dropdowns, you can get a list of all of them more easily. Like this:
<div id="mcontainer" class="dropdown dropdowna">
Also as a suggestion, it's really not a very good idea to have duplicate ids in your document. It's against the html standard, and it can cause strange issues with getting tags by id.
Once you have a common class on all your dropdowns, you can do something like this to close all others, and toggle the one related to the button you're clicking.
function fnClick(e){
var $dd = $(this).next();
$('.dropdown').not($dd).removeClass('active');
$dd.toggleClass('active');
}
//open menu
$('.country-btn-portugal').click(fnClick);
$('.country-btn-uk').click(fnClick);
here's an update of your fiddle to demonstrate:
https://jsfiddle.net/s4nk1zev/143/
You can try using promise().done(), and reviewing the html class. This is a fiddle for you: https://jsfiddle.net/zxoLmf71/
using a promise on an element let you wait for the code to finish execution before start the new one. this is the code:
//open menu
const buttons = $('.country-btn');
const dropDownMenus = $('.dropdownmenu');
const dropDownItems = $('.dropDownItem')
buttons.click(function() {
dropDownMenus.removeClass('active');
$(this).next('div').promise().done(function() {
$(this).toggleClass('active');
});
});
//close if menu clicked
dropDownItems.click(function() {
dropDownMenus.removeClass('active');
});
Hope it helps
I tried to find solution to close bootstrap menu when clicking outside of it(in mobile window size), but cant get it to work, I get it to work when clicking one of the 'a' links by this code:
// menu buttons collapses when clicking a link
$('document').ready(function()
{
if ($('a').on('click', function()
{
$('.collapse, #mainContainer').removeClass('in');
$('.navbar-toggle').toggleClass('collapsed'); // button
}));
});
but how to close menu by clicking outside the menu navbar?
here's my page that shows the problem
iwebdesign.se
and yes i tried this already, not working:
similar question
Assuming you want to do something different when clicking outside of the menu (i.e. collapse the menu) than what happens when you click inside the menu, you probably want something like this to determine if you're clicking inside or outside of the menu:
$('body').click(function(event){
// check if the clicked element is a descendent of navigation
if ($(event.target).closest('.navigation').length) {
return; //do nothing if event target is within the navigation
} else {
// do something if the event target is outside the navigation
// code for collapsing menu here...
}
});
https://jsfiddle.net/L3qg4pa8/5/ shows the concept, roughly.
Of course, you will need to replace '.navigation' in the .closest() statement with the appropriate selector for the container of your navigation.
$(document).on('click',function(){
$('.collapse').collapse('hide');
});
Just copy the code and past your custome script or index.html
thank's Remy
click outside to hide bootstrap toggle menu close(hide) it
Here the answer :
(document).on('click',function(){
$('.collapse').collapse('hide');
})
Hope it's help :)
Remy
I get some issue when opening the menu1 dropdown and directly after mouseover the menu2 to open it without closing de menu1.
If I open the menu1 and move the cursor out from the nav to close the dropdown and then mouseover the menu2 it works fine.
If I go directly from menu1 to menu2 or inversely, the menu2 dropdown appear under the menu1 dropdown.
I thinks that I have a mistake in my html or it can be fix with a jquery function but I don't know how to solve this. I wish to add more menu, in the actually there are only two.
I hope that you understand my problem,
Any help would be appreciated
$(document).ready(function () {
var menu = $('.menu')
menu.hide();
$("#mainbutton").mouseenter(function(){
$(".menu").stop().slideDown("fast");
});
$("#nav").mouseleave(function(){
$(".menu").stop().slideUp("fast");
});
var menu2 = $('.menu2')
menu2.hide();
$("#secondboutton").mouseenter(function(){
$(".menu2").stop().slideDown("fast");
});
$("#nav").mouseleave(function(){
$(".menu2").stop().slideUp("fast");
});
});
Here the JSFiddle
I would suggest to add a general class name to all menus .menu and a specific selector for each individual menu (#menu1 or .menu1) as well as an indicator for the active state .active. this way you can simply close all .menu.active
see the following fiddle as a simple proof of concept:
https://jsfiddle.net/ad3a5qyw/2/
EDIT:
I've abstracted the fiddle so you can add data-menu attributes to the nav-items to indicate the associated menu.
I see what's going on here:
It's easy with jQuery and the code you've written already, and here's an example with a new menu item to show how easy it is: https://jsfiddle.net/xyqoj24m/2/
What's going on is that the mouseleave functions are only run when the mouse leaves the entire #nav element. So what needs to be done is handle the hiding/showing of the menus like so:
When the mouse hovers over a menu item, close all other dropdowns and show the correct one.
When the mouse leaves the dropdown or the menu item, close the dropdown.
Take a look at this Javascript and see what that means:
$("#mainbutton").mouseenter(function(){
$(".menu").stop().slideDown("fast");
$(".menu2").stop().slideUp("fast");
$(".menu3").stop().slideUp("fast");
});
$("#secondbutton").mouseenter(function(){
$(".menu2").stop().slideDown("fast");
$(".menu").stop().slideUp("fast");
$(".menu3").stop().slideUp("fast");
});
// leave the first menu dropdown
$("#mainbutton, .menu").mouseleave(function() {
$(".menu").stop().slideUp("fast");
});
// leave the second menu dropdown
$("#secondbutton, .menu2").mouseleave(function() {
$(".menu2").stop().slideUp("fast");
});
Feel free to ask questions!
What I am trying to do
Close a div with a secondary button and mimicking the slideDown script from the first button.
The problem
Once the footer button is pressed it displays my hidden div (#footerPanel) by pushing the header up. Once you click footer again it closes the panel and slides the header back into place.
The menu button will work as follow, once you hover over the button the site navigation will display (not included in JSFiddle). By having this I would like to have the ability to close the #footerPanel and have the header slide down, mimicking the close ability from the footer button.
What is happening now is, when I click menu the #footerPanel slides down but leaving the header stuck at the position where the div pushed it. Also when you move the mouse the div slides back up.
How can I go about fixing this issue? I tried a few solution but they all seem to have the same outcome.
The js
$('#more').toggle(function(){
//show its submenu
$('#footerPanel').slideDown(500);
$(this).parent().parent().animate({'bottom': "+=400"}, 500);
},
function () {
//hide its submenu
$('#footerPanel').slideUp(500);
$(this).parent().parent().animate({'bottom': "-=400"}, 500);
});
$(document).ready(function(){
$('#menu').hover(function(){
$("#footerPanel").slideToggle();
});
});
JSFiddle
Updated Fiddle: http://jsfiddle.net/9s33F/5/
I think I have what you are looking for. I added the following as a callback for when the animate function completes when opening the menu.
function () {
$(this).addClass('open');
}
Then in the click handler for menu add the following if statement:
if ($(this).closest('header').is('.open')) {
$('header').animate({'bottom': "-=400"});
}
Also, you're code will look cleaner and be less if you used .closest() rather than .parent().parent() and so on.
jQuery.closest: http://api.jquery.com/closest/
So I am trying to create a drop down menu using .hover() and .toggle(). While Have managed to get the menu to appear when the user rolls over the link, it disappears when the user moves off the link to select an item from the menu. Is there a method or technique for keeping the menu toggled even when the user isn't still hovering over the link?
Here is the JS:
<script type="text/javascript">
$(document).ready(function() {
$("#menu_link").hover(function () {
$("#the_menu").toggle();
});
});
</script>
Put the menu element inside the link.
The solution can vary greatly depending on the HTML markup you're using. But a general solution to these kinds of things is to let the body element detect "mouseenters" and detect which element the event originated from. If it's not either #menu_link or #the_menu, then hide the menu.
$("body").mouseenter(function (e) {
var eventParents = $(e.target()).parents();
if (eventParents.index($("#menu_link")) == -1 &&
eventParents.index($("#the_menu")) == -1) {
$("#the_menu").hide();
}
});
$("#menu_link").mouseenter(function () {
$("#the_menu").show();
});
This gives you flexibility in, for example, placing the menu link in a different container div to the menu itself.