Question

我已经修改了here找到的教程，但我无法正常使用它。

目标是将整个页面向左滑动以显示导航菜单。现在我只专注于让动画工作。

HTML：

<div class="pg-container">
  <div class="nav-bar">
    <h1>My Site</h1>
    <img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" width="40" height="40px" class="hamburger">
  </div>
  <div class="welcome">
    <h2>Hamburger Demo</h2>
  </div>
</div>

CSS：

body {
  margin: 0;
}

h1 {
  font-family: sans-serif;
  padding: 0;
  margin: 0;
  font-size: 2em;
  float: left;
}

h2 {
  color: white;
  font-size: 3em;
  text-align: center;
}

.pg-container {
  height: 100vh;
  background-image: url(https://pixabay.com/static/uploads/photo/2013/10/02/23/03/dawn-190055_960_720.jpg);
  background-size: cover;
}

.nav-bar {
  height: 40px;
  background-color: hsla(360, 100%, 100%, 0.51)
}

.hamburger {
  float: right
}

.welcome {
  margin: 10em 0
}

和Javascript：

// Open the menu
  $(".hamburger").click(function() {

  // set width of page container
    var contentWidth = $(".pg-container").width();
    $(".pg-container").css('width', contentWidth);

  // disable all scrolling on mobile devices while menu is shown
    $(".pg-container").bind('touchmove', function(e){e.preventDefault()})

    // set margin for whole container with jQuery UI animation
    $(".pg-container").animate({"margin-right": "50%"}, 700)
})

我怀疑这个问题与设置页面宽度的部分有关，以防止在添加右边距时更改布局。这是因为Javascript在添加上边距而不是右边距时起作用。

Answer 1

它不起作用，因为你在边缘之前设置了宽度。

删除此部分：

var contentWidth = $(".pg-container").width();
$(".pg-container").css('width', contentWidth);

此处示例：https://jsfiddle.net/7oqw85ph/

全宽布局：https://jsfiddle.net/7oqw85ph/1/

为什么这个jQuery汉堡包按钮不起作用？

1 个答案: