尝试在点击时在div之间导航(使用动画从侧面滑出)。我有点工作了,但是当你回到主菜单时我需要它“重新开始”,它目前还没有。
现在您可以单击菜单图标(由于某种原因,您必须单击两次)才能打开侧面菜单。然后,如果您点击“更多文章>”出现下一个菜单。单击<<顶部的箭头会将您带回主菜单,但如果您尝试点击“更多文章>”再次,它没有打开。此外,如果您一起关闭菜单并尝试重新打开它,它也不起作用......
有关更好的清洁方式的任何建议都会非常感激。到目前为止,这是我正在使用的代码:
HTML
<div class="triggerBox"><a href="#" id="trigger">≡</a>
</div>
<div class="menu">
<h2>Programs</h2>
<ul>
<li><a href="#">Page</a>
</li>
<li><a href="#">Page</a>
</li>
<li><a href="#">Page</a>
</li>
</ul>
<h2>Pages</h2>
<ul>
<li><a href="#">Page</a>
</li>
<li><a href="#">Page</a>
</li>
<li><a href="#">Page</a>
</li>
<li><a id="interior-trigger" href="#">Page with Children > </a>
</li>
</ul>
<h2>College</h2>
<ul>
<li><a href="#">Full Site</a>
</li>
<li><a href="#">Apply</a>
</li>
</ul>
</div>
<div class="interior-menu">
<h2><a id="back" href="#"><<</a>Articles</h2>
<ul>
<li>Article</li>
<li>Article</li>
<li>Article</li>
<li>Article</li>
<li>Article</li>
<li>Article</li>
</ul>
</div>
CSS
body {
font-family:"Open Sans Condensed", sans-serif;
font-size:12px;
}
.menu, .interior-menu {
position:fixed;
top:0px;
right:-360px;
}
.interior-menu {
display:none;
.menu ul, .interior-menu ul {
display:block;
list-style-type:none;
width:300px;
height:100%;
padding:0px;
margin:0px;
}
我的剧本
// slide open and close the main menu
$("#trigger").click(function () {
$(".menu").animate({
"right": "0px",
"width": 'toggle'
},
100);
});
//hide the interior menu
$("#interior-menu").hide();
//after clicking on a page with children, slide out the main panel
$("#interior-trigger").click(function () {
$(".menu").animate({
"right": "0px",
"width": "0px"
},
30);
//slide out the parent page's child menu
$(".interior-menu").animate({
"right": "0px",
"width": 'toggle'
},
30);
});
请参阅小提琴:http://jsfiddle.net/j4N38/
提前致谢。
答案 0 :(得分:0)
看看这个...我分叉你的jsfiddle所以你可以测试它。 http://jsfiddle.net/ZLHMf/
// slide open and close the main menu
$("#trigger").on('click', function(e) {
e.preventDefault();
$(".menu").animate({
"right": "0px",
"width": 'toggle'
},
100);
});
//hide the interior menu
//$("#interior-menu").hide();
//after clicking on a page with children, slide out the main panel
$('.menu').on('click', '#interior-trigger', function(e) {
e.preventDefault();
$(".menu").animate({
"right": "0px",
"width": "0px"
},
30);
//slide out the parent page's child menu
$(".interior-menu").animate({
"right": "0px",
"width": 'toggle'
},
30);
});
// click the back button to reveal the slide main panel again
$('.interior-menu').on('click', '#back', function(e) {
e.preventDefault();
//slide out the interior panel
$('.interior-menu').animate({
"right": "0px",
"width": "toggle"
}, 30);
//slide in the main panel again
$(".menu").animate({
"right": "0px",
"width": '300px'
},
100);
});
编辑:
您是否考虑过使用CSS过渡?如果你不需要支持IE&lt; 10。
,你可以在没有jquery的情况下完成大部分工作