Multi-column Menu

[Black Mamba]

This is what I’ve got so far.

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

It’s working just fine, but there’s been a sudden change of plans and I have to change the way it works.

I want to keep the same behavior (slideUp / slideDown) but instead of the submenus sliding down just below their respective menu I need them to slide down on a 2nd column. I’m actually gonna have at least 3 columns, but the behavior is the same.

I’ve looked for a jQuery plugin but couldn’t find anything remotely similar.

Does anybody know of one? or a simple fix to my current situation…

Thanks.

[Paulie_D]

Just to be clear…these are supposed to be submenus?

Because that’s not the structure you have in your Codepen.

<ul class="menu">
  <li>Item 1</li>
  <li class="submenu">Item 1-A</li> /* not a submenu */
  <li class="submenu">Item 1-B</li> /* not a submenu */
</ul>

[Black Mamba]

I guess… probably not. lol
I’m sorry if I’m misusing some specific terminology.

It’s supposed to be exactly what the picture shows.
Which is what I have in the Codepen except that, like I said, I need them to slide down in a different collumn to the right.

[Paulie_D]

Here’s a CSS one…that displays on hover.

Any sliding can be added later.

http://codepen.io/Paulie-D/pen/vEpKJv

[Black Mamba]

That’s (roughly) it, but I’m not sure I’m able to tailor the js to work with that. :(

[Paulie_D]

I’m not sure I’m able to tailor the js to work with that

That’s how developers make a living.

Change the structure / layout…change the javascript.

[Black Mamba]

Not sure what that’s supposed to mean, but ok.

[Black Mamba]

OK, I’ve finally managed to make fix most of it.
I’ve got two columns working.

The issue now is adding a 3rd column.
I’ve been messing around with it for a while and think I’ve handled the HTML part okay (Item 2), the issue now is the script. I just can not make it work…

Can somebody help me out?
Thanks.

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

[Author]

Posts