jQuery based menu – How to make slideUp/Down not run simultaneously?

[Black Mamba]

I think it will take a JS guru to figure this thing out, but if you think you can do it and wanna give it a try, I’d really appreciate it.

So, I got this jQuery based menu that whenever you already have a menu open and you click to open a different one, slideUp and slideDown run at the same time. It doesn’t look good!

Is it possible to make slideDown wait for slideUp, so they don’t overlap?

I guess it could be as simple as delaying slideDown’s start. However that should only happen when there’s a menu already open that needs to be closed first. If nothing needs to be closed there shouldn’t be any delay…

http://codepen.io/ZHAA/pen/WbzQjB

[shaneisme]

Well the basics are relatively simple in jQuery.

$(element).slideUp(function() {
  $(otherElement).slideDown();
});

This would first slide the element and after it was completed it would then fire off whatever was inside the new function() call.

Perhaps this helps you?

[Black Mamba]

where would I place that?

[shaneisme]

It’s just an example. In a quick glance of the plugin you’ve chosen, it sure does look more verbose than it needs to be. Of course the author could be handling more things than you need.

Maybe it’s time to roll your own? A dropdown menu is actually quite simple, really it only needs a few lines of jQuery.

You could even do it in one line with slideToggle()!

http://api.jquery.com/slidetoggle/

[Black Mamba]

I’m a JS n00b no way I could do that on my own.
Even if I could, I’d run into the same problem, right?

Your first suggestion might work, I’m just so n00b that I don’t know how to implement it myself.

That’s why I picked up that plugin in the first place.

[shaneisme]

You can’t stop being a newb unless you try :)

Here’s something you can mess around with:

http://codepen.io/drainpip/pen/pvLjmy

Figuring out what needs to happen to have multiple menu dropdowns will help you in the long run.

[Black Mamba]

Well, something as simple as that I think I understand.
But the issue isn’t even adding submenus (although the JS part would quickly become much more complicated, at least to me) the issue is then preventing both actions from overlapping. I’d be back to square one! :(

I really can’t write it from scratch, my limitations are so many that it is just counterproductive.

Also, this plugin is “mobile friendly”. That’s also one of the reasons I’m using it.

I honestly think the easiest path is editing this plugin not writing a new script.

[Shikkediel]

I’ve been having a minor code overdose lately otherwise I’d scribble something together. I think Shaneisme is right, the current script is really bloated and it would be a piece of cake with some jQuery.
Clicks are always mobile friendly by the way.

[Black Mamba]

@Shikkediel A piece of cake for pro a guess, not for a self-taught dude who comes from a completely different field. I’ve been teaching myself the very basics, like knowing which part goes where and how to edit minor things, but actually writing it myself, even if not completely from scratch, I think is just not doable.

The plugin has also some hover options. I think that’s where it being “mobile friendly” would make a difference. Anyway, I’m not using that capability at the moment so I guess I could even lose that, if that’s what it takes to have this thing fixed.

@Shikkediel if you got the know how and can find a few minutes to try to put something together I’d be really, really grateful.

[Shikkediel]

No pro here, I’m really going along with learning like you described but may just have been doing it a bit longer (only started in this decade though). As soon as the coding jetlag is gone, I could have a go at customising this one towards sliding instead of hiding (that just rhymes, it’s gotta show stuff too of course, lol) :

http://codepen.io/Shikkediel/pen/LEyYpp

Mobile friendly and hover support (with a delay feature).

[Author]

Posts