3

この画像のようなメニューを作りたい：

ここに画像の説明を入力してください

左側には完全なメニュー（各ボタンはdiv）がありますが、ページを開いたときにボタンが表示されません。押したままスライドして（おそらくタッチスライドで？）ボタンを表示したいのですが、これはモバイルデバイスで機能する必要があります。また、PCで動作しなくても構いません。

jQuery mobile、Hammer、または別のライブラリを使用してこれが可能かどうかはわかりません。最初のボタンを1回クリックするだけですべてのボタンを表示するメニューをすでに作成しましたが、デザイナーはそれだけでは満足していません。私のコードは次のようなものです：

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

可能だと思いますが、仕様に合わせてコードをカスタマイズする必要があるかもしれません。これが私が見つけた1つの例です：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 に答える