The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Need help with js for center menu on district website

  • This topic is empty.
Viewing 12 posts - 31 through 42 (of 42 total)
  • Author
  • #192995

    Got a pen maybe? The only really tricky thing I was messing around with was making a distinction between the mouse leaving the fly list item (parent) or the list/submenu (child) itself. In the first case the sub item would have to be hidden, where in the latter it would actually have to remain visible. Using a click, this shouldn’t be an issue.

    I’ll post the question to pen 2.0 in a separate topic, I am curious.
    Edit – found the cause there already…


    Actually don’t need a pen, view it live @

    but here is pen I made for ya real quick, had to join:

    lemme know what you think. I’ve tested on mobile devices/touch screens, and the clicks work on the menu but not on the links…argh almost there.
    only thing that doesn’t show on the pen is my Arrow image on the fly objects of course. just look at the live site.
    hopefully we can figure out the mobile device thing now for making the links clickable


    This will make the submenu links clickable (actually, prevent toggle) :

    $('.fly').on('mousedown touchstart', function(e) {
        if ( !== this) return; // this line
        sub = $(this).find(nav);

    I did notice opening a new submenu does not hide the previous one…
    Mouse coordination stuff is more mind boggling than I thought.

    And I’m flabbergasted this works with actually setting a timeout :

    .mouseleave(function() {
        sub.hide()}, 1000)

    I don’t think in this case you need to prevent it bubbling up the DOM.


    Okay, flabbergast mode off. That wasn’t actually timing it out but triggered the function already in place. Looking at the current interaction, I think this is what you might be after?

    Original pen revisited


    Yeah, I’ll keep messing with it. Gonna try to make it work with mobile devices with all the tablets we have. Links don’t work on mobile devices yet.
    Added click(); on this pen and it works but doesn’t work under the .fly sub menu


    Do you know of a quick way to get the links clickable on mobile devices? The menu works fine on the mobile devices I just cant click on the links.

    Once this is working we’ll call it finished!


    I think you wanna try to remove e.preventDefault(), it’s just added to prevent text selection but it may be interfering with touch devices.


    Works perfect now, thank you!


    You’re welcome. Glad we got all the quirks removed. I thought I knew a little bit about mouse events but that was an exaggeration.
    A little wiser now though (especially about…


    I went ahead and took the hover menu to the next level – like I think it should function but wasn’t quite able to get there before :

    • Full hover functionality as well as touch and click support
    • Preventing text selection yet still able to redirect external links
    • Auto-hiding when anything other than the menu is tapped
    • Fully tweaked hover interaction for showing/hiding items correctly

    Holler @atjones44 in case it may be of interest still.


    Thanks a lot man.


    No problem, geek enough to want to get the details right. :-B
    It’s more of a general demo with slightly different class names so let me know if you want to implement it but run into trouble somewhere…

Viewing 12 posts - 31 through 42 (of 42 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.