可拖动下拉菜单（通过touchslide显示菜单元素）

Question

我想打一个菜单就像一个在这个形象：

在左侧有完整的菜单（其中每个按钮都是一个div），但是当我打开页面时，这些按钮不会显示。我想通过按住并滑动来显示按钮（可能是触摸滑动？），但这必须在移动设备上工作。另外，如果它不能在个人电脑上运行也无所谓。

我不知道这是可能的通过使用jQuery移动，锤子，或其他库。我已经做了一个菜单，只需单击第一个按钮即可显示所有按钮，但设计师对此并不满意。我的代码是这样的：

<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> 

你知道这是可能吗？如果是这样，我可以用什么来完成这项任务？

Answer 1

EDIT 1

更多可能的部分解决方案：

• JQuery Mobile : Pull to refresh list view
• https://github.com/watusi/jquery-mobile-iscrollview

---

EDIT 0

类似的问题：Does anyone know of a pulldown menu plugin in javascript?

与解决：http://jsfiddle.net/JXeWA/46/

---

我认为这是可能的，但你可能需要的代码定制您的规格。以下是我找到的一个示例：http://jsfiddle.net/vxvgH/3/light/

This example使用类似的效果来刷新页面。这可能有助于定制您的代码。

下面你会发现第一个例子中的JavaScript。这很混乱，但它可以开始。

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"}); 
}); 
​