Question

我想制作一个像这张图片中的菜单：

enter image description here

左侧是完整菜单（每个按钮都是div），但打开页面时不显示按钮。我想通过按住和滑动（可能是滑动滑动？）来显示按钮，但这必须适用于移动设备。此外，如果它在PC上不起作用也没关系。

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

<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

编辑1

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

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

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

1 个答案: