javascript - 如何创建一个滑动菜单，它将填充窗口宽度，除了拉杆按钮宽度？

Question

我正在尝试创建一个滑动菜单，它将填充窗口宽度减去下拉按钮宽度。当网页加载时，我希望菜单在窗口之外，并且有一个按钮会在页面加载时向左移动。当用户单击按钮时，菜单应该出现在窗口中，按钮向右移动。 我创建了一个 animation video here这会告诉你我想要什么。

在 jsfiddle 中，菜单只是淡出，但我希望在单击具有 .puller 类的按钮时菜单从左向右滑动。

请参阅 jsfiddle 中的代码 演示 jsfiddle

$(document).ready(function() {
  var stickyNavTop = ($('.container')).offset().top;

  var stickyNav = function(){
    var scrollTop = $(window).scrollTop();

    if (scrollTop > stickyNavTop) { 
      $('.container').addClass('fixed');
    } else {
      $('.container').removeClass('fixed');
    }
  };

  stickyNav();

  $(window).scroll(function() {
    stickyNav();
  }).resize(function() {
    stickyNav();
  }).load(function() {
    stickyNav();
  });
  $(".dropdown").click(function() {
    $(".dpitem").slideToggle(300);
  });
  var calcWidth = function() {
    var pullerDimensions = $('.puller').width();
    $('#cpcc,.dpitem').width($(window).width() - pullerDimensions);
  }
  $(document).ready(function() {
    calcWidth();
  });

  $(window).resize(function() {
    calcWidth();
  }).load(function() {
    calcWidth();
  });
  var cPcc = document.getElementById ("cpcc");

  var cpHeight = function() {
    var cpBtnHolder = $(cPcc).height();
    $('.content').css("padding-top",cpBtnHolder);
  }

  setInterval(function() {
    cpHeight();
    calcPHeight();
    pp();
  }, 0)
  var calcPHeight = function() {
    var toolsDimensions = $('#cpcc').height();
    $('.puller').height(toolsDimensions);
    $('.puller').css("line-height",toolsDimensions +"px");
  }
  $(document).ready(function() {
    calcPHeight();
  });
  $(window).resize(function() {
    calcPHeight();
  }).load(function() {
    calcPHeight();
  });
  var Pwidth = $('#cpcc').width();
  var PSpce = $(window).width()-Pwidth;
  $(".puller").click(function() {
    $(".container").toggle( function() {
      $(".container").css({
        transform: "translate3d("+"-"+Pwidth+"px, 0, 0)"
      });
    }, function () {
      $(".container").css({
        transform: "translate3d(-0, 0, 0)"
      });
    });
  });
});

Answer 1

Calc 是您的 friend 。您可以将其与“过渡”一起使用以达到预期效果。看看这个简化的例子。 http://codepen.io/anon/pen/gPBQOb

在这种情况下，好的做法是切换一个将覆盖位置属性的类。它还应将您的人字形图像切换为指向左和右。

您的示例使用了大量 js 计算，并且必须随着窗口大小的变化重新计算。此示例仅使用 js 在单击时切换 css 类，其余部分完全由 css 管理。在我看来要简单得多。

HTML

<div class="maincontent"></div>
<div class="menu">
  <div class="button"></div>
</div>

CSS

.maincontent{
  background-color: green;
  height: 2000px;
  width: 100%;
}

.menu{
  background-color: red;
  width: 100%;
  height: 200px;
  position: fixed;
  top: 0px;
  left: 0px;
  transition: left 1s;
}

.menu.collapse{
  left: calc(-100% + 30px)
}

.button{
  background-color: yellow;
  height: 100%;
  width: 30px;
  position: absolute;
  right: 0px;
}

JS

$('.button').click(
  function(){
    $('.menu').toggleClass('collapse')
  })