屏幕外切换菜单将主要内容推离屏幕右侧

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/

我猜你最好的选择是做一些类似于 scaledown pusher example 的事情。最好的办法是缩小当前页面以保持其可见。

下次提示：将您的代码放在 jsfiddle 中，以便人们下次更容易查看您的示例。

Answer 2

你好，我已经用 JS 快速完成了这个 fiddle。

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

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

I don't suggest you change the size of your container for responsive reasons, since all elements inside will be affected and you could have many layout issues.

但是无论如何，如果你能确保所有代码都经过良好编码并且适合你可以看到你正在添加 class show-nav 将你的主容器向右翻译，你需要的是改变它改为修改 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

屏幕外切换菜单将主要内容推离屏幕右侧

Offscreen toggle menu pushes main content off right side of screen

javascript

html

css

toggleclass