如何创建一个滑动菜单，该菜单将填充窗口宽度，除了拉取按钮宽度？答案

【问题标题】：how to create a sliding menu which will fill the window width except by puller button width?如何创建一个滑动菜单，该菜单将填充窗口宽度，除了拉取按钮宽度？
【发布时间】：2016-02-07 07:53:02
【问题描述】：

我正在尝试创建一个滑动菜单，该菜单将填充窗口宽度减去拉出按钮宽度。我希望在网页加载时菜单离开窗口，并且有一个按钮在页面加载时会向左移动。当用户单击按钮时，菜单应出现在窗口中，并且按钮向右移动。我创建了一个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)"
      });
    });
  });
});

【问题讨论】：

欢迎来到 SO。请访问help center 了解如何询问以及询问什么。 SO 不喜欢这里没有代码的 jsfiddle 链接是有充分理由的。真正的问题是什么？
在 jsfiddle 中，菜单只是淡出但我希望菜单在单击带有 .puller 类的按钮时从左向右滑动。

标签： javascript jquery html css

【解决方案1】：

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

好的做法是切换一个类，在这种情况下将覆盖位置属性。它还应该将您的 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')
  })

【讨论】：