jQueryのハンバーガーボタンが動作しないのはなぜですか？

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/