-1

I've adapted a tutorial found here and am having trouble getting it to work correctly.

The goal is to have the whole page slide out to the left to reveal a navigation menu. Right now I'm just focused on getting the animation to work.

The 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>

The 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
}

and 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)
})

I suspect the issue has something to do with the section that sets the width of the page to prevent the layout changing when the right margin is added. This is because the Javascript works when adding a top margin instead of right margin.

1 Answers1

1

It doesn't work because you set width before margin.

Remove this part:

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

Example here : https://jsfiddle.net/7oqw85ph/

Full width layout: https://jsfiddle.net/7oqw85ph/1/

Jakob
  • 3,493
  • 4
  • 26
  • 42