-1
我修改了發現的教程here,並且無法正常工作。爲什麼這個jQuery漢堡包按鈕不起作用?
目標是讓整個頁面向左滑動以顯示導航菜單。現在我只專注於讓動畫起作用。
的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在添加頂部邊距而不是右邊距時起作用。
但隨後佈局崩潰。如何告訴頁面在向左滑動時保持其寬度? – user5775606
查看全寬版面的更新答案..是你需要的嗎? – jakob
完美。謝謝!! – user5775606