javascript - 在 JavaScript 中创建下拉菜单/div

Question

我想在 webapp 中实现类似于 android 下拉菜单的功能: http://cdn4.droidmatters.com/wp-content/uploads/2011/06/android-notifications.jpg

基本上我想从顶部、左侧、右侧、底部将菜单、工具栏、组件等拉入屏幕。现在我已经使用 jquery-ui resizable 函数找到了一些基本的东西

$("#menuContainer").resizable();

http://jsfiddle.net/JXeWA/46/

不同之处在于，显示的 div 是相当静态的。所以我不会随着元素向下移动，它已经完全在那里，因此“只”暴露在外。如果将其与 android 下拉状态栏之类的东西进行比较:在这里，您会觉得该元素确实是用手指下拉的。当您将元素拉入显示器时，它会连续显示 - 希望这是有道理的，这很难解释。

感谢您的任何想法!

Answer 1

这就是我的处理方式...

CSS:

#menuContainer{
     position:relative;
     background-color:#A3155C;
     overflow:hidden;
     height:10px;
     padding:5px 5px 12px 5px;
}
#ddMenu{
    position:absolute;
    top:25%;
    width:100%;
    display:none;
}
#grippie{
     height:16px;
     display:inline-block;
     position:absolute;
     left:50%;
     bottom:0px;
     color:#FFF;
     -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    width:40px;
    font-size:12px;
}

JavaScript:

var h = parseInt($("#menuContainer").css('height')); //height mentioned in css - feel free to change

$("#menuContainer").resizable({ 
        handles: {
            "s":"#grippie"   
        },
        maxHeight:50, 
        minHeight:0,
        resize: function(){
            if($(this).height()<=h){
                 $("#ddMenu").hide();
            }else{
                $("#ddMenu").show();
            }

        }
});

演示: http://jsfiddle.net/JXeWA/112/

希望这就是您要找的。如果您还需要什么，请告诉我。