我正在尝试使用jquery中的滑动效果制作一个不错的菜单:http : //jsfiddle.net/rXjMV/5/
$(".goBack").click(function() {
$(this).parent().hide('slide', {
direction: 'right'
});
$("#parentSidebar").show('slide', {
direction: 'left'
});
});
$(".sidebarMover").click(function() {
var newmenu = $(this).attr('name');
$(this).parent().hide('slide', {
direction: 'left'
});
$("#" + newmenu + "Sidebar").show('slide', {
direction: 'right'
});
});
请注意,如果您单击“足球”,则菜单向左滑动,另一个从右侧滑动,但它们在另一个下方而不是并排。
尝试了很多东西,显示出来:内联并在jQuery队列中使用delay(),但是问题是CSS,我认为是jQuery ...有什么想法吗?
添加位置:绝对;宽度:100%; 在这样的容器中:
<div id="sideBar">
<div id="sideHead">TICKET MENU</div>
<hr id="sideHeadSeperator">
<div class="sideItemContainer" id="parentSidebar" style="position:absolute;width:100%; ">
<div class="sideItem sidebarMover" name="football">Football<i class="fa fa-caret-right"></i></div>
<div class="sideItem sidebarMover" name="tennis">Tennis<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Rugby<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Basketball<i class="fa fa-caret-right"></i></div>
</div>
<div class="sideItemContainer" id="footballSidebar" style="display: none;position:absolute; ;width:100%;" >
<div class="sideItem">Arsenal<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Chelsea<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Liverpool<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Manchester Utd<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Manchester City<i class="fa fa-caret-right"></i></div>
<div class="goBack"><i class="fa fa-caret-left fa-inverse"></i> go back</div>
</div>
<div class="sideItemContainer" id="tennisSidebar" style="display: none;">
<div class="sideItem">Wimbledon<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Rome Masters<i class="fa fa-caret-right"></i></div>
<div class="sideItem">US Open<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Roland Garros<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Madrid Masters<i class="fa fa-caret-right"></i></div>
<div class="goBack"><i class="fa fa-caret-left fa-inverse"></i> go back</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句