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是你的朋友。您可以将其与“过渡”一起使用以实现预期效果。看看这个简化的例子。 http://codepen.io/anon/pen/gPBQOb

良好的做法是切换一个类，该类将覆盖此情况下的position属性。它还应该将您的V形图像切换为左右两点。

您的示例使用了大量的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')
  })

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

1 个答案:

HTML

CSS

JS