时间戳

首页 > 解决方案 > 打开画布外菜单时调整内容大小

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

问题描述

我创建了一个运行良好的简单画布菜单。

$("#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>

如果您切换 menu-2，您可以看到关闭画布菜单被推送到页面中，这很好。

但是，这会导致部分页面文本被推到页面之外。无论我的画布外菜单被推入页面多远，我都需要页面文本留在视口中。

本质上，文本会响应菜单宽度并相应地调整大小。

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

标签： jqueryhtmlcss

解决方案

$("#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>

推荐阅读