可拖動下拉菜單（通過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"}); 
}); 
​