I am creating a responsive site that will use the same technique for responsive menu that is used on Apple website. It can be seen on mobiles only but its behaviour is exactly the same as in this pen http://codepen.io/TheBrownieable/pen/epIEx I prepared.
The basic technique that is used here is simply have an overflow which you can drag horizontally. It works on mobiles just perfectly because you don’t drag a scrollbar but the whole div with your finger to make it move. However, on desktops you have a mouse and the only ways to make the scrollbar move is by using mouse scroll or dragging the scrollbar itself.
So I’m curious whether anyone could advise me on what would potentially be the best way to make the div draggable on desktops too?
I think it would be easier to implement my own solution than use this script. Mainly because the slides snap at left or right depending from how much you dragged and I don’t need snapping at all. Perhaps I am missing, could you show me an example of where it’s being used in similar case as mine?
Hi @Pullo , thanks for your input. It’s not nice including the whole jQuery UI and I tried writing my own implementation but in the end gave up, will leave it for another day and make it a plugin perhaps.
The pen you built is great except it doesn’t deal with boundaries, the menu should not be allowed to be dragged to right and leave blank space on the left. Here is my snippet to deal with that http://codepen.io/TheBrownieable/pen/osHeE , not perfected yet, it’s a lot harder than it looks at first sight, at least for me.