Question

我已经创建了一个工作正常的简单画布菜单。

$("#menu2").click(function() {
  $("#menu2").toggleClass("active");
  $("#off-canvas-right").toggleClass("active");
  $(".content").toggleClass("slide-left");
});
$(document).on('click', function(event) {
  if (!$(event.target).closest('#menu1').length) {
    $(".content").removeClass("slide-right");
  }
  if (!$(event.target).closest('#menu2').length) {
    $("#menu2").removeClass("active");
    $("#off-canvas-right").removeClass("active");
    $(".content").removeClass("slide-left");
  }
});

.content {
  position: absolute;
  transition: margin 0.5s ease-in-out;
  padding-left: 30%;
}

.content p {
  font-size: 42px;
}

body {
  overflow-x: hidden;
  position: relative;
}

#off-canvas-left,
#off-canvas-right {
  position: absolute;
  width: 30em;
}

#off-canvas-left {
  transition: left 0.5s ease-in-out;
  left: -30em;
}

#off-canvas-right {
  transition: right 0.5s ease-in-out;
  right: -30em;
}

#off-canvas-left.active {
  transition: left 0.5s ease-in-out;
  left: 0;
}

#off-canvas-right.active {
  transition: right 0.5s ease-in-out;
  right: 0;
}

.content.slide-right {
  transition: margin 0.5s ease-in-out;
  margin-left: 30em;
  margin-right: -30em;
}

.content.slide-left {
  transition: margin 0.5s ease-in-out;
  margin-right: 30em;
  margin-left: -30em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='menu2'>menu2</a>

<div class="content">
  <p>PAGE TEXT HERE</p>
</div>
<nav id="off-canvas-right">
  <ul>
    <li><a href="#">Stream</a></li>
    <li><a href="#">Lab</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

如果您切换菜单2，您可以看到将关闭画布菜单推入页面，这很好。

但是，这导致部分页面文本被推到页面外部。我需要页面文本保留在查看端口中，而不管将画布菜单推送到页面中的距离如何。

从本质上讲，文本将对菜单宽度做出响应，并相应地调整大小。

如果有人能指出我实现这一目标的方向，将不胜感激！

Answer 1

$("#menu2").click(function() {
  $("#menu2").toggleClass("active");
  $("#off-canvas-right").toggleClass("active");
  $(".content").toggleClass("slide-left");
});
$(document).on('click', function(event) {
  if (!$(event.target).closest('#menu1').length) {
    $(".content").removeClass("slide-right");
  }
  if (!$(event.target).closest('#menu2').length) {
    $("#menu2").removeClass("active");
    $("#off-canvas-right").removeClass("active");
    $(".content").removeClass("slide-left");
  }
});

.content {
  position: fixed;
  transition: margin 0.5s ease-in-out;
  padding-left: 30%;
}

.content p {
  font-size: 42px;
}

body {
  overflow-x: hidden;
  position: relative;
}

#off-canvas-left,
#off-canvas-right {
  position: absolute;
  width: 30em;
}

#off-canvas-left {
  transition: left 0.5s ease-in-out;
  left: -30em;
}

#off-canvas-right {
  transition: right 0.5s ease-in-out;
  right: -30em;
}

#off-canvas-left.active {
  transition: left 0.5s ease-in-out;
  left: 0;
}

#off-canvas-right.active {
  transition: right 0.5s ease-in-out;
  right: 0;
}

.content.slide-right {
  transition: margin 0.5s ease-in-out;
  margin-left: 30em;
  margin-right: -30em;
}

.content.slide-left {
  transition: margin 0.5s ease-in-out;
  margin-right: 30em;
  margin-left: -10em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='menu2'>menu2</a>

<div class="content">
  <p>PAGE TEXT HERE</p>
</div>
<nav id="off-canvas-right">
  <ul>
    <li><a href="#">Stream</a></li>
    <li><a href="#">Lab</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 2

$("#menu2").click(function() {
  $("#menu2").toggleClass("active");
  $("#off-canvas-right").toggleClass("active");
  $(".content").toggleClass("slide-left");
});
$(document).on('click', function(event) {
  if (!$(event.target).closest('#menu1').length) {
    $(".content").removeClass("slide-right");
  }
  if (!$(event.target).closest('#menu2').length) {
    $("#menu2").removeClass("active");
    $("#off-canvas-right").removeClass("active");
    $(".content").removeClass("slide-left");
  }
});

.content {
  position: absolute;
  transition: padding 0.5s ease-in-out;
  padding-left: 30%;
}

.content p {
  font-size: 42px;
}

body {
  overflow-x: hidden;
  position: relative;
}

#off-canvas-left,
#off-canvas-right {
  position: absolute;
  width: 30em;
}

#off-canvas-left {
  transition: left 0.5s ease-in-out;
  left: -30em;
}

#off-canvas-right {
  transition: right 0.5s ease-in-out;
  right: -30em;
}

#off-canvas-left.active {
  transition: left 0.5s ease-in-out;
  left: 0;
}

#off-canvas-right.active {
  transition: right 0.5s ease-in-out;
  right: 0;
}

.content.slide-right {
  transition: margin 0.5s ease-in-out;
  margin-left: 30em;
  margin-right: -30em;
}

.content.slide-left {
  transition: padding 0.5s ease-in-out;
  padding-left: 0;
  margin-right: 30em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='menu2'>menu2</a>

<div class="content">
  <p>PAGE TEXT HERE</p>
</div>
<nav id="off-canvas-right">
  <ul>
    <li><a href="#">Stream</a></li>
    <li><a href="#">Lab</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

打开画布菜单时调整内容大小

2 个答案: