[英]Menu Open & Close on menu button - Jquery
I'm trying to create a slide out menu, that open an closes on the same a tag. 我正在尝试创建一个滑出菜单,该菜单在相同的标签上打开一个关闭窗口。 I've put something together but, it runs through the whole animation instead of pausing after opening.
我放在一起,但是它贯穿整个动画,而不是在打开后暂停。
HTML HTML
<header>
<nav>
<ul class="slide-menu">
<li class="menu-element"><a href="#" id="aboutopen">How tall?</a></li>
<li class="menu-element"><a href="#book">Books</a></li>
<li class="menu-element"><a href="weblink" target="_blank">Journal</a></li>
<li class="menu-element"><a href="#" id="aboutcontact">Contact</a></li>
</ul>
<a id="puller" href="#">Menu</a>
</nav>
</header>
Jquery jQuery的
$(document).ready(function()
{
$("#puller").click(function(){
$(".slide-menu").animate({
marginLeft: '+=360px'
}, 500);
});
$("#puller").click(function(){
$(".slide-menu").animate({
marginLeft: '-=360px'
}, 500);
});
});
Can anyone help with this? 有人能帮忙吗?
Using jQuery toggle is a good idea. 使用jQuery切换是一个好主意。 You can also simply maintain the state of the menu as to slided out already or not and take action like this
您也可以简单地维护菜单状态,以了解是否已经滑出菜单并采取这样的操作
$(document).ready(function(){
var slide = false;
$("#puller").click(function(){
if(slide){
$(".slide-menu").animate({marginLeft: '-=360x'}, 500);
slide = false;
}else{
$(".slide-menu").animate({marginLeft: '+=360px'}, 500);
slide = true
}
});
});
Use jQuery Toggle, like so. 像这样使用jQuery Toggle。 Simple.
简单。
$(document).ready(function() {
var menu = $('.slide-menu');
var speed = 500; // set animation speed
$('#puller').toggle(
function(){
menu.animate({
marginLeft: '+=360px'
}, speed);
},
function(){
menu.animate({
marginLeft: '-=360px'
}, speed);
}
);
)};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.