在HTML中，如何将“正文”推向右侧，并显示菜单？

Question

我正在努力实现您在使用智能手机应用程序时所看到的内容。

BODY CONTENT (* button *)
BODY CONTENT BODY CONTENT
BODY CONTENT BODY CONTENT
BODY CONTENT BODY CONTENT
BODY CONTENT BODY CONTENT

当你按下“按钮”时，我想得到类似的东西：

MENU | BODY CONTENT BODY
MENU | BODY CONTENT BODY
MENU | BODY CONTENT BODY
MENU | BODY CONTENT BODY
MENU | BODY CONTENT BODY

所以整个身体都是正确的。我试图让身体绝对，保持宽度，然后向右推：

$('body').css('left', $('#menu_tablet').width()+'px').width (saveWidth + parseInt($('#menu_tablet').width()) + 'px');

但saveWidth现在包含固定宽度，而不是百分比。但我确定必须有更好的方法

Answer 1

使用正确的CSS，你可以用更少的JQuery行获得所需的输出。检查这个小提琴：

Type 1 Demo

<强> CSS

html,body{
    white-space:nowrap;
    overflow:hidden;
    width:100%;
}
div{
    min-width:100px;
    display:inline-block;
}
#menu{
    display:none;
}
b{
    color:blue;
    cursor:pointer;
}

<强> JQuery的

$('b').click(function(){
    $('#menu').toggle();
});

Updated fiddle which work exactly as asked

---

我只是在编写上面的小提琴时考虑facebook的android版本。在菜单图标上单击菜单将主体向右移动，内容部分被切断。

因此，如果您的要求不是点击按钮上的内容，那么您可以尝试下面的小提琴：

Type 2 demo with code / Fullscreen

Answer 2

您不应该使用body标记。改为使用容器：

<强> HTML：

<button id="toggle">Toggle Menu</button>
<ul id="menu">
    <li>Option</li>
    <li>Option</li>
    <li>Option</li>
    <li>Option</li>
</ul>
<div id="content">
    <p>Some content goes here</p>
</div>

<强> CSS：

/* Set the menu to width: 0, overflow: hidden so that it is initially collapsed */
#menu {
    width: 0;
    float: left;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
/* To show the menu, give it an explicit width */
#menu.show {
    width: 300px;
}
/* Make sure the content sits to the right of the menu (given enough space) */
#content {
    float: left;
    width: 300px;
}
/* Permanent button in the top right of the page */
button {
    position: absolute;
    top: 0;
    right: 0;
}

<强> jQuery的：

// On click of the button, toggle the show class
$("button").click(function() {
   $("#menu").toggleClass("show"); 
});

Here is a jsFiddle上述内容。您显然需要调整布局和样式以满足您的要求，但这应该会让您走上正确的轨道。

我之前使用width的原因是，您可以为width属性设置动画以提供滑动效果：

$("#menu").animate({ width: 300 }, "slow");

Answer 3

-webkit-transform: translate3d(80%, 0, 0);
-moz-transform: translate3d(80%, 0, 0);
transform: translate3d(80%, 0, 0);

80％ - 从左起

例如，不是我的，我发现它http://jsfiddle.net/vishl/wzPSF/