问题描述
我有一个菜单，上面有不同的地方：
Point 1
Point 2
Point 3
Point 4
并想要打开子菜单，例如，单击了Point 2。 它看起来应该像这样：
Point 1
Point 2 | Sub-Point 1
| Sub-Point 2
| Sub-Point 3
| Sub-Point 4
| Sub-Point 5
Point 3
Point 4
最好的方法是什么？
谢谢
1楼
Canvas
1
已采纳
2015-07-31 08:16:16
基本上，您可以按照自己喜欢的方式创建菜单，所有您需要做的就是将导航栏移到屏幕之外，然后使用jQuery通过Animate函数简单地滑入和滑出，并删除并添加一个类以确定是否菜单应该滑出或滑入。希望这对您有所帮助
jsFiddle
HTML
<div class="sidemenu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<button class="slidetoggle slideout" type="button">slide toggle</button>
的CSS
.sidemenu {
position: absolute;
height: 100px;
width: 100px;
left: -85px;
top: 50px;
}
jQuery的
$(function () {
$('.slidetoggle').on('click', function () {
if ($(this).hasClass('slideout')) {
$('.sidemenu').animate({
left: "+=85",
}, 1000, function () {
$('.slidetoggle').removeClass('slideout');
$('.slidetoggle').addClass('slidein');
//Done
});
}
else if ($(this).hasClass('slidein')) {
$('.sidemenu').animate({
left: "-=85",
}, 1000, function () {
$('.slidetoggle').removeClass('slidein');
$('.slidetoggle').addClass('slideout');
//Done
});
}
});
})