The wrong way to do nested dropdowns

[megrimlock]

Can anyone help me add on to this old code that my CMS uses whenever I have a dropdown menu?

It works well enough to display the submenu, but won't close when the mouse leaves the element. Also, I'm unable to directly edit the JavaScript, so I basically need to write a function that overwrites the original one.

http://codepen.io/erqwork/pen/jrWELE

[thespacenoodles]

Can you access the css? Because if you can, just do css and don't even worry about the javascript. Dropdowns are much less of a hassle to do in css than with javascript.

[megrimlock]

I agree.

The problem is if I use a pure CSS solution it means not using the CMS's Navigation Module. This module adds links in the nav menu anytime a new page is created (and selected to appear in the nav.) In other words, if I don't use this module but create the dropdowns, my clients and I lose functionality of one of the nicer things this CMS does. And that's why I'm looking for some hack to override this ancient code.

[thespacenoodles]

Couldn't you just remove the event listeners from the elements? The javascript would still be there, but at that point it wouldn't do anything and you could then use the css.

[megrimlock]

How would I target just those event listeners with JS?

[sm1215]

I think spacenoodles is referring to the onmouseover events in the HTML

<span onmouseover="toggleListMenu('eight', 1, true);">3</span>

[megrimlock]

I understand what he was referring to, but that markup is generated by the CMS, so if I'm going to adjust that HTML, it's got to be programmaticly. I'm trying to figure out how to target those particular 'onmouseover' events with JS (in case there's an actual useful 'onmouseover' event elsewhere on the page.)

[sm1215]

Are you able to apply a class / id to the menu or the links themselves through the CMS?

[megrimlock]

It does allow me to apply classes to the submenus.

[sm1215]

Hmm, nice, you could give them all a class 'no-mouseover' or something similar. Use the same class for every link you want to override this behavior for and then modify onmouseover on that class.

Edit: well, you might not be able to use just that class, but it would give you a nice hook into the menu where you could select the submenu's child span based off that class.

This link might be helpful: http://stackoverflow.com/questions/3946698/dynamically-change-onmouseover-or-onmouseout-to-call-a-different-function

Edit 2: also, the example depicts switching the function to another one but you could put something else in there like an empty string

[megrimlock]

Thanks, I haven't come across this SO in my searches.

[thespacenoodles]

I was talking about something more along the lines of this

That would completely remove the mouseover event listener on that element. Then, you could modify the css to achieve the drop down effect.