Grow your CSS skills. Land your dream job.

Methods for showing and hiding element

  • # July 2, 2014 at 1:19 pm

    I’m working on a plugin and there is one thing currently stopping me. I’m trying to figure out the best approach for hiding and displaying an element when the link is hovered.

    Basically when you hover over a link in the plugin demo bellow, the menu shows up and the user will be able to click one of the buttons inside the menu. Obviously the menu disappears once the link isn’t hovered anymore, so clicking a button in the menu is impossible. I took this approach here. http://j-v.me/urltargetmenu.js/ which basically delays the menu hiding, giving the user enough time to enter the menu and the hide event is canceled if the cursor hovers over the menu. The problem is that this method doesn’t work well on mobile, and its unreliable.

    Heres the 2nd version of the plugin. So i’m trying to find the best way to show and hide the menu with reliability, and mobile friendliness. Any ideas?

    http://j-v.me/plugin/

    # July 2, 2014 at 11:00 pm

    In most CSS menus, the hover statement is on an <li> item in a

    MOD EDIT – Unformatted (and therefore unreadable) code removed.

    That means that you are still hovering over the <li> when you hover over one of the submenu items.
    There are many sites that discuss this: one is http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu. Hope that’s helpful.

    # July 3, 2014 at 1:20 pm

    It’s not the same situation. I tried implementing something like that but it doesn’t work because the wrapper div must be the same dimensions as the link. So its not like it will stretch to contain the menu

    # July 3, 2014 at 1:43 pm

    The problem is that this method doesn’t work well on mobile, and its unreliable.

    This is a little vague…what issues are you having?

    # July 3, 2014 at 1:53 pm

    it doesn’t work well on touch-screens, and if you move over the link, out and back in quick enough, you can have the menu disappear when the cursor is hovered over the link.(On the first demo). I guess i could stick with the method im using now if i could find a way to fix those two issoes

    # July 3, 2014 at 2:03 pm

    Can you not use tap/touch events for mobile?

    Or touchstart/touchend?

    http://api.jquerymobile.com/tap/ and others

    # July 3, 2014 at 2:07 pm

    I guess that would work but is it ok to require 2 jquery libraries for such a simple plugin?

    # July 3, 2014 at 2:09 pm

    Edited above re touchstart & touchend.

    # July 3, 2014 at 2:12 pm

    I guess that would work but is it ok to require 2 jquery libraries for such a simple plugin?

    Well yes,of course it’s Ok…but I’m not sure what you are referring to by plug-in.

    If you mean the functionality, it’s not really a ‘plug-in’ as I would normally expect to see the term used but that could be me misunderstanding.

    # July 3, 2014 at 7:20 pm

    I’m not sure what you mean, but i intend for others other than me to use this. So will they be willing to add an extra library for such a simple plugin? i dont think it will be worth the effort unless they are already using jquerymobile

    # July 21, 2014 at 8:46 am

    @elkrocke

    You really don’t need to include jQuery Mobile,

    I’d be tempted to do a feature detection first to see if the device using the plugin supports touch, if it does then trigger the menu on touch/click, if not, then trigger the menu on hover,

    Check out the method that Modernizr uses to detect for touch enabled browsers here

    # July 21, 2014 at 8:54 am

    Feature detection really isn’t the issue AFAIK.

    The issue is how to implement touch events when the device does support them at least that’s the way I read it.

    JQM is just one of, no doubt, several methods.

    # July 21, 2014 at 9:16 am

    First off: this is actually a neat little plugin you’re working on ;-)

    Now, on topic:
    Maybe an easy way is to put the little menu inside the anchor, this will at least fix the issue for “regular” browsers, as you’ll still be hovering over the anchor while you’re hovering over the menu.

    Now, when it comes to other devices that use touch, it might be better to use jQuery and listen for ‘click’ events (I don’t think you have to listen to native touch events, afaik most (all?) mobile browsers send a click event as well).

    So a little mockup:

    It’s really rough and you’d probably want it to behave a little different, but what it does is: when you click the link (you can also hover it on desktop) it will show the menu, then when you click the link again, it will go to that link regardless.

    Again: you’d need to change the code here and there and do some decent testing, but it should get you on the right track (hopefully) ;-)

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".