Draggable div like on Apple.com on mobile

Hi there,

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?

Look at Javascript. CSS can not do this. I’ll request a transfer to the Javascript forum. My work uses http://kenwheeler.github.io/slick/

Draggable examples you can convert to menus if you know what you’re doing.

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?

It is probably overkill (especially on mobile), but you could look at using jQueryUI and draggable.

Here’s a demo.

CSS:

nav {
  position: relative;
  height: 70px;
  width: 200px;
  background: #ccc;
  overflow-y: hidden;
  overflow-x: hidden;
}

#nav-helper {
  position: absolute;
  top: 0;
  left: 15px;
  width: 330px;
}

ul {
  padding-left: 15px;
}

li {
  float: left;
  list-style-type: none;
  padding-right: 20px;
}

Markup:

<nav>
  <div id="nav-helper">
    <ul>
      <li>Home</li>
      <li>Team</li>
      <li>About</li>
      <li>Jobs</li>
      <li>Blimey</li>
    </ul>
  </div>
</nav>

JS:

$("#nav-helper").draggable({ axis: "x" });

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.

Hi,

If you want to build this natively, something like this might be worth having a look at: http://blog.teamtreehouse.com/implementing-native-drag-and-drop

Or, you could only pull in the pieces of jQuery UI that you need:

I’m off on vacation tomorrow, but if you are still struggling with this in a week’s time, just let me know and we’ll see what can be done.