3

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

在此处输入图像描述

在左侧有完整的菜单（其中每个按钮都是一个 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>

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

4

1 回答 1

0

编辑 1

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

编辑 0

类似的问题：有人知道 javascript 中的下拉菜单插件吗？

和解决方案：http: //jsfiddle.net/JXeWA/46/

我认为这是可能的，但您可能必须根据您的规范自定义代码。这是我发现的一个例子：http: //jsfiddle.net/vxvgH/3/light/

此示例使用类似的效果来刷新页面。这可能有助于自定义您的代码。

您将在下面找到第一个示例中的 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"}); 
});
​
于 2012-12-13T18:48:32.590 回答