Swipe menu on mobile

  • Resolved dartfreakz

    (@dartfreakz)


    6 years, 3 months ago

    Hi,
    Is it possible to show the menu with a swipe on the screen?
    What I would like to realize is showing the navigation menu when I swipe from right to left on a mobile screen. (IOS, Android)

    Anyone an idea how to realize this?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author sevenspark

    (@sevenspark)

    Hi dartfreakz,

    This isn’t something that is built into the plugin, but what you could do is use a touch library such as hammer.js and then hook up the swipe events to the ShiftNav Javascript API to open/close the menu when swiping.

    Hope that helps!

    Why don’t you bundle the “touch script”? If I know how to do all that, why do you think I am looking at use your plugin?

    I have touch slider – works.

    I see no reason why wouldn’t you do that since you’re selling a “Pro” version…. Unless, you don’t know how (yet)?

    Plugin Author sevenspark

    (@sevenspark)

    Wow, that is quite the ridiculous and insulting insinuation – not to mention entirely baseless.

    We don’t bundle the touch library for a variety of reasons: it’s inefficient and irresponsible for multiple plugins to bundle common libraries, it causes collisions when the same library is loaded multiple times, and touch events can often conflict with existing touch events in themes, with the potential to cause site usability issues. While a touch slider may not have an issue because all touch events are contained within that element, swipe gestures on the body of the site itself are a much different case.

    Overall, bundling the touch library would be a poor design decision. When creating plugins for public consumption, we have a responsibility to make good design decisions and not just throw the kitchen sink at the problem to create a plugin that may have many features but not function smoothly. We want everything included in the plugin to be rock solid. That’s why we don’t include it.

    These are important considerations when developing for an ecosystem like WordPress, where many different pieces of code are interacting on the same site. The pattern of providing an API to hook up your own system is a much better option, even if it takes a little extra effort. It only takes a few lines of code to achieve, and we provide a detailed tutorial on how to implement this customization for those who would like to do so:

    https://sevenspark.com/tutorials/swipe-gesture-controls-shiftnav-responsive-mobile-menu-wordpress

    As a non-developer, I wouldn’t expect you to be aware of all these nuances of JavaScript, touch events, and plugin development – and that’s absolutely fine. Asking for clarification on why this would not be included is certainly understandable. But the insulting suggestions are absurd and entirely unnecessary.

    If you’re looking for assistance with customizations, there are a lot of freelancers out there who could help – we recommend WP Kraken as a good option if you’re not sure who to get in touch with.

    Have a good one

    Hey Guys!

    Firstly, the OP was being a **** to insinuate that you should have included this into your plugin. Complete lack of respect. I felt I had to come and support you on this – which then got me looking deeper into your plugin ?? So, a win I guess.

    I managed to install your plugin without any issues & have followed your (Very well written) tutorial on setting up a swipe function for mobile. I followed everything and it’s perfect. No issues.

    The only thing I wanted to ask you; and I know you said there is no support for this but I thought i’d give it a shot, is if you know a way to make this swipe function only load on mobile. Currently, if the user somehow clicks and drags their mouse on desktop – it opens ??

    I am in no way an expert in Javascript and so I thought i would ask. If it’s out of this scope – then no worries ??

    Thanks so much!

    Plugin Author sevenspark

    (@sevenspark)

    Thanks, @shayno90 , I appreciate it ??

    Glad to hear you’re enjoying the plugin and the tutorial!

    What I’d do is modify this line (8 in the tutorial) :

    $( '.shiftnav-shiftnav-main' ).shiftnav( 'openShiftNav' );

    to this:

    if( $( window ).width() < 768 ) $( '.shiftnav-shiftnav-main' ).shiftnav( 'openShiftNav' );

    That way the menu will only open if the viewport is less than 768px wide (you can customize that value if you like, of course).

    Hope that helps! If you have future questions, probably best to open a new thread ?? Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Swipe menu on mobile’ is closed to new replies.