如何使用html,css,jquery制作类似于Facebook Mobile侧面菜单的滑动菜单？

Question

我正在建立一个网站,并在网站左侧有一个垂直的按钮列表.我想把它们隐藏在侧面,所以只有标签显示.当菜单被隐藏时,我希望标签说出更多,然后当菜单可见时,我希望标签说隐藏.

所以我有几个问题......我怎样才能使菜单(实际上只是一个div)在点击时从屏幕外滑出,同时还有标签上的文字更改和href目标更改,以便滑动功能完成后,标签会显示隐藏,点击它时,它会将div发送回屏幕.

如果您的手机上有Facebook应用程序,我基本上想在我的桌面网站上复制它.

Answer 1

使用jQuery这非常简单.这些是你应该采取的步骤.

1. 使用固定定位将弹出窗口固定到屏幕的一侧
2. 添加用户触发幻灯片放入/缩小效果的可单击区域
3. 创建一个jQuery动画,通过负边距打开/关闭内容
4. 在动画回调中更改您希望触发器显示的方式(显示/隐藏)

重要 - 在jQuery 1.8中不推荐使用toggle事件,在1.9中将​​其删除.我的原始答案将不再适用.这个新版本适用于旧版本和新版本的jQuery.此方法使用单击处理程序和调用的类hidden来确定弹出窗口是否应在屏幕上/关闭动画.

http://jsfiddle.net/tzDjA/

jQuery的

//when the trigger is clicked we check to see if the popout is currently hidden
//based on the hidden we choose the correct animation
$('#trigger').click( function() {
    if ($('#popout').hasClass('hidden')) {
        $('#popout').removeClass('hidden');
        showPopout();
    }
    else {
        $('#popout').addClass('hidden');
        hidePopout();
    }
});

function showPopout() {
    $('#popout').animate({
        left: 0
    }, 'slow', function () {
        $('#trigger span').html('Close');  //change the trigger text at end of animation
    });
}

function hidePopout() {
    $('#popout').animate({
        left: -40
    }, 'slow', function () {
        $('#trigger span').html('Show');  //change the trigger text at end of animation
    });
}

CSS

/* minimal CSS */
 #popout {
    position: fixed;                /* fix the popout to the left side of the screen */
    top: 50px;
    left: -40px;                    /* use a negative margin to pull the icon area of the popout off the edge of the page */
    width: 75px;
    border: 1px dotted gray;
    color: gray;
}
#trigger {                          /* create a clickable area that triggers the slide in/out effect */
    position: absolute;             /* position clickable area to consume entire right section of popout (add a border if you want to see for yourself) */  
    top: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;   
}

原始答案(从jQuery 1.9开始不起作用)

http://jsfiddle.net/WMGXr/1/

$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('Close');
        });
    }, 
    function() {
        $('#popout').animate({ left: -40 }, 'slow', function() {
            $('#toggle').html('Show');
        });
    }
);

<div id="popout">
    <div id="toggle">Show</div>
    <br style="clear: both" />
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>        
    </ul>
</div>

#popout { position: fixed; height: 100px; width: 75px; border: 1px dotted gray; background: darkblue; color: white; top:50px; left: -40px; }
#toggle { float: right; }

Answer 2

Jquery .toggle和.animate将按照mrtsherman的说明工作.我建议使用z-index并稍微调整一下css.查看此示例 - http://jsfiddle.net/codefuze/HYjEB/1/