Draggable drop-down menu in a website (display menu elements by touchslide)

Question

I want to make a menu like the one in this image:

enter image description here

On the left side there's the complete menu (where each button is a div), but the buttons are not displayed when I open the page. I want to display the buttons by holding and sliding (possibly with a touchslide?), but this must work on mobile devices. Also, it doesn't matter if it doesn't work on a PC.

I don't know if this is possible by using jQuery mobile, Hammer, or another library. I already did a menu which displays all the buttons with a single click on the first button, but the designer is not happy with just that. My code is something like this:

<div id="main_button">Button</div>
<nav id="main_menu">
    <div id="b1">Yellow</div>
    <div id="b2">Red</div>
    <div id="b3">Blue</div>
    <div id="b4">Green</div>
    <div id="b5">Orange</div>
    <div id="b6">Purple</div>
</nav>

Do you know if this is possible? If so, what can I use to accomplish this task?

The closest solution I found was the resizable property of jquery-ui but it's not really what I'm looking for, besides, it doesn't work on mobile devices, I'm still looking for an alternative though. — user1899500, Dec 13 '12 at 18:34

score 0 · Accepted Answer · edited May 23 '17 at 10:24

EDIT 1

More possible partial solutions:

EDIT 0

Similar question: Does anyone know of a pulldown menu plugin in javascript?

And the solution: http://jsfiddle.net/JXeWA/46/

I think it's possible but you might have to customize the code to your specifications. Here's one example I found: http://jsfiddle.net/vxvgH/3/light/

This example uses a similar effect to refresh the page. That might helpful in customizing your code.

Below you'll find the JavaScript from the first example. It's messy but it's somewhere to start.

var startPosition = 0;
var pagePosition = 0;
var scrollY = 0;
var scrollPrevented = false;

$(document).on('vmousedown', '.dragme', function(event) {
    var startPosition = pagePosition;
    $(document).on('vmousemove', function(event2) {
        scrollY = event2.pageY;
        pagePosition = startPosition + scrollY - event.pageY;
        if (pagePosition > $("#menu").height()) {
            pagePosition = $("#menu").height();
        } else if (pagePosition < 0) {
            pagePosition = 0;
        }
        if (scrollPrevented == false) {
            scrollPrevented = true;
            $(document).on('touchmove', function(ev) {
                ev.preventDefault();
            });
        }
        $("#menu").css({
            'z-index': '-1'
        });
        menuSlide();
        $("#menu").show();
    });
});

$(document).on('vmouseup', function() {
    if (scrollPrevented == true) {
        $('body').unbind('touchmove');
        scrollPrevented = false;
    }
    $(document).off('vmousemove', stopScroll());
});

function menuSlide() {
    var newHeight = $(window).height() - pagePosition;
    $("#page1").css({
        top: pagePosition,
        height: newHeight
    }).page();

    $("#page2").css({
        top: pagePosition,
        height: newHeight
    }).page();
}

function stopScroll() {
    if (pagePosition > $("#menu").height() / 2) {
        pagePosition = $("#menu").height();
        $("#menu").show();
        $("#menu").css({
            'z-index': '1500'
        });
    } else {
        pagePosition = 0;
        $("#menu").hide();
        $("#menu").css({
            'z-index': '-1'
        });
    }
    menuSlide();
}

$("#menu").css({
    position: "absolute",
    width: $(window).width(),
    height: $(window).height * .3,
    left: 0,
    'z-index': '-1',
    'min-height': 'initial'
}).page();

$(document).on("click", ".page1", function(){
    $("#menu").css({
        'z-index': '-1'
    });

    pagePosition = 0;
    menuSlide();
    $("#menu").hide();
    $.mobile.changePage("#page1", {transition:"slide",
                                   reverse: true}); 
});

$(document).on("click", ".page2", function(){

    pagePosition = 0;
    menuSlide();
    $("#menu").hide();
    $.mobile.changePage("#page2", {transition:"slide"}); 
});

This is what I was looking for. I'm going with your first example since the one in the other question doesn't seem to work on mobile devices (I tested it on an iPad). Looks like jQuery Mobile does the job, thank you very much! — user1899500, Dec 13 '12 at 19:09

Draggable drop-down menu in a website (display menu elements by touchslide)

1 Answers1