项目大纲
我正在构建一个带有滑出菜单的网页,它按预期工作,并且在动画中保持我预期的显示方式,以滑入/滑出菜单。
这在以下浏览器上正常工作
Windows
Internet Explorer(11.0.9600.17239)Firefox(32.0)歌剧(17.12)铬(38.0.2125.44β-m)
Mac
歌剧(12.15)火狐(32.0)铬(36.0.1985.125)Safari(6.0.5)
iOS
铬(37.0.2062.52)Safari(Iphone 5s-找不到版本号)
问题浏览器
问题似乎只出现在windows上的Safari(5.1.7);
问题
当你点击滑出菜单时,它似乎会重新加载并从右边滑入,当它离开页面向左滑入时,所以我认为它应该像我尝试过的其他浏览器一样从左边滑入!
当菜单退出并按下使其滑回时,它似乎向左滑出,然后从右侧滑出,再从左侧滑出。
相关jsFiddle链接和代码
(帖子末尾的链接)
JS
$(document).ready(function () {
// Set menu_out var, for clicks to activate slideIn/Out
var menu_out = false;
// Works if menu is in OR out;
$(".top_button").click(function () {
menu_move();
});
$('#menu a').click(function () {
menu_move();
});
// Only work if menu if out;
$('#content').click(function () {
if (menu_out == true) {
menu_move();
}
});
function menu_move() {
if (menu_out) {
$('#menu').animate({
'margin-left': "-71%"
}, 300, function () {
menu_out = false;
});
}
else {
$('#menu').animate({
'margin-left': "0"
}, 300, function () {
menu_out = true;
});
}
}
});
CSS
* {
font-family:"Helvetica Neu", "Helvetica", sans-serif;
}
html, body {
background: #c3c3c3;
font-weight: 300;
margin: 0;
}
#container {
position: relative;
background: black;
width: 100%;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
}
#menu {
background: #000;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
color: white;
margin-left: -71%;
float: left;
}
.menu_item {
width: 100%;
border-bottom: solid 1px #333;
background: #222222;
height: 40px;
font-size: 14px;
color: #fff;
}
.menu_item a {
font-size: 14px;
font-weight: 400;
display: block;
color: white;
text-decoration: none;
padding: 12px 0 0 15px;
}
.menu_head {
height: 47px;
}
.menu_head h1 {
color: #fff;
font-size: 15px;
font-weight: bold;
padding: 14px 0 15px 10px;
margin: 0;
background: #000;
border-bottom: solid 1px #333;
}
#content {
color: white;
overflow: hidden;
}
.top_button {
border: none;
background: black;
position: absolute;
top: 11px;
left: 18px;
}
.button_strips {
width: 21px;
height: 3px;
margin: 3px 5px;
background: white;
}
.top {
height: 46px;
border-bottom: solid 1px #333;
position: relative;
}
.display {
text-align: right;
white-space: nowrap
}
p {
white-space: nowrap;
}
HTML
<div id="container">
<div id="menu">
<div class="menu_head"><h1>MENU</h1></div>
<div class="menu_item"><a href="#">Link 1</a></div>
<div class="menu_item"><a href="#">Link 2</a></div>
<div class="menu_item"><a href="#">Link 3</a></div>
<div class="menu_item"><a href="#">Link 4</a></div>
<div class="menu_item"><a href="#">Link 5</a></div>
</div>
<div id="content">
<div class="top"> <a class="top_button">
<div class="button_strips"></div>
<div class="button_strips"></div>
<div class="button_strips"></div>
</a>
</div>
<div class="display">
<!-- Add text when needed /-->
</div>
</div>
</div>
http://jsfiddle.net/L7zs39dj/
使用链接为的函数事件时,始终尝试使用preventDefault
$('#menu a').click(function (e) {
e.preventDefault();
menu_move();
});