Home › Forums › JavaScript › Need help with js for center menu on district website
- This topic is empty.
-
AuthorPosts
-
January 12, 2015 at 2:08 pm #192995ShikkedielParticipant
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…January 12, 2015 at 2:28 pm #192997atjones44ParticipantActually don’t need a pen, view it live @ http://www.usd430.k12.ks.us
but here is pen I made for ya real quick, had to join:
http://codepen.io/atjones44/pen/OPpLPXlemme 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 clickableJanuary 12, 2015 at 8:30 pm #193030ShikkedielParticipantThis will make the submenu links clickable (actually, prevent toggle) :
$('.fly').on('mousedown touchstart', function(e) { e.preventDefault(); e.stopPropagation(); if (e.target !== this) return; // this line sub = $(this).find(nav); sub.toggle(); })
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.
January 12, 2015 at 10:57 pm #193034ShikkedielParticipantOkay, 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?
January 12, 2015 at 11:08 pm #193036atjones44ParticipantYeah, 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
http://codepen.io/atjones44/pen/rayNXWJanuary 13, 2015 at 8:28 am #193075atjones44ParticipantDo 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!
January 13, 2015 at 9:19 am #193077ShikkedielParticipantI think you wanna try to remove e.preventDefault(), it’s just added to prevent text selection but it may be interfering with touch devices.
January 13, 2015 at 9:41 am #193078atjones44ParticipantWorks perfect now, thank you!
January 13, 2015 at 10:18 am #193081ShikkedielParticipantYou’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 aboute.target
)…January 18, 2015 at 12:59 pm #193528ShikkedielParticipantI 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
http://codepen.io/Shikkediel/pen/LEyYpp?editors=011
Holler @atjones44 in case it may be of interest still.
January 18, 2015 at 5:26 pm #193542atjones44ParticipantThanks a lot man.
January 18, 2015 at 11:49 pm #193561ShikkedielParticipantNo 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… -
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.