屏幕外切换菜单会将主要内容从屏幕右侧推出

Question

您好，感谢您的时间。以下HTML，CSS和JavaScript用于创建屏幕外菜单，在单击锚点时切换到视图。然后，页面的主要内容将在屏幕右侧发送。当屏幕外菜单将其推向右侧时，有没有办法让主要内容换行或调整大小以在屏幕上保持完全可见？

$(function() {
  $('.toggle-nav').click(function() {
    $('body').toggleClass('show-nav');
    return false;
  });
});

nav {
  width: 700px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.site-wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.push-wrap {
  border: 1px solid red;
  -webkit-transition: all 300ms ease 0;
  -moz-transition: all 300ms ease 0;
  -o-transition: all 300ms ease 0;
  transition: all 300ms ease 0;

  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.show-nav .push-wrap {
  border: 1px solid green;
  transform: translate(700px, 0); 
  transform: translate3d(700px, 0, 0);
}

body {
  background: #e3e3e3;
}

a {
  transition: all 300ms ease;
}

nav {
  background: #2b343f;
  text-align: center;
  -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
  box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li a {
  display: block;
  text-decoration: none !important;
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  color: #fff;
}

nav ul li a:hover {
  background: #4EFFFF;
  color: #000;
}

article {
  position: relative;
  min-height: 1500px;
  background: #e3e3e3;
  z-index: 9;
  width: 100%;
}

article h1 {
  text-align: center;
  margin: 40px 0 30px;
}

article p {
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 40px;
}

article a.toggle-nav {
  position: absolute;
  font-size: 25px;
  color: rgb(255, 139, 139);
  top: 0;
  left: 0;
  background: #444;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="site-wrap">

  <nav>
    <ul>
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li> 
    </ul>
  </nav>

  <div class="push-wrap">

    <article>
      <a href="#" class="toggle-nav"></a>
      <div class="container">
        <div class="row">
          <div class="col-md-12">

            <h1>Off Screen Navigation</h1>
            <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah !</p>

          </div>
        </div>
      </div>
    </article>

  </div>

</div>

谢谢！

Answer 1

为了让您了解可能的情况，请查看此鼓室示例：http://tympanus.net/Development/SidebarTransitions/

我想你最好的选择是做一些类似于缩放推动器的例子。这是您最好的选择，缩小当前页面以使其可见。

下次提示：将您的代码放入jsfiddle，以便人们下次更轻松地查看您的示例。

Answer 2

您好我很快在JS小提琴中做到了这一点。

这是您正在寻找的效果类型吗？

https://jsfiddle.net/cmuffinj/1ktLzfb2/

CSS：

nav {
width: 700px;
height: 100%;
display: none;
top: 0;
left: 0;
}

.site-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}

.push-wrap {
border: 1px solid red;
-webkit-transition: all 300ms ease 0;
-moz-transition: all 300ms ease 0;
-o-transition: all 300ms ease 0;
transition: all 300ms ease 0;

-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.show-nav .push-wrap {
border: 1px solid green;
transform: translate(700px, 0); 
transform: translate3d(700px, 0, 0);
}

body {
background: #e3e3e3;
}

a {
transition: all 300ms ease;
}

nav {
background: #2b343f;
text-align: center;
-webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
}

nav ul {
margin: 0;
padding: 0;
list-style: none;
}

nav ul li a {
display: block;
text-decoration: none !important;
height: 60px;
line-height: 60px;
font-size: 18px;
color: #fff;
}

nav ul li a:hover {
background: #4EFFFF;
color: #000;
}

article {
position: relative;
min-height: 1500px;
background: #e3e3e3;
z-index: 9;
width: 100%;
}

article h1 {
text-align: center;
margin: 40px 0 30px;
}

article p {
font-size: 20px;
line-height: 30px;
margin-bottom: 40px;
}

article a.toggle-nav {
position: absolute;
font-size: 25px;
color: rgb(255, 139, 139);
top: 0;
left: 0;
background: #444;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
}

使用Javascript：

$(function() {

    $('.toggle-nav').click(function() {
        $('nav').slideToggle();
    });

});

Answer 3

  

出于响应原因，我不建议您更改容器的大小，因为内部的所有元素都会受到影响，并且您可能会遇到很多布局问题。

但是无论如何，如果你能确保所有它编码良好并且适合你，你可以看到你正在添加类show-nav将你的主容器翻译到右边，你需要的是改变它来修改{{1相反，使用width：

在整页上运行代码段

calc()

$(function() {
  $('.toggle-nav').click(function() {
    $('body').toggleClass('show-nav');
    return false;
  });
});

nav {
  width: 700px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.site-wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.push-wrap {
  border: 1px solid red;
  transition: all 1.2s linear;
  width:100%;
}
.show-nav .push-wrap {
  border: 1px solid green;
  width: calc(100% - 700px);
  transform: translate(700px, 0);
}
body {
  background: #e3e3e3;
}
a {
  transition: all 300ms ease;
}
nav {
  background: #2b343f;
  text-align: center;
  -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
  box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li a {
  display: block;
  text-decoration: none !important;
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  color: #fff;
}
nav ul li a:hover {
  background: #4EFFFF;
  color: #000;
}
article {
  position: relative;
  min-height: 1500px;
  background: #e3e3e3;
  z-index: 9;
  width: 100%;
}
article h1 {
  text-align: center;
  margin: 0;
}
article p {
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 40px;
}
article a.toggle-nav {
  position: absolute;
  font-size: 25px;
  color: rgb(255, 139, 139);
  top: 0;
  left: 0;
  background: #444;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}