css - making jQuery .show() AND .hide() run side by side with UI effect -
i'm trying make nice menu sliding effects in 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' }); });
notice if click on football menu slides left , other comes right come 1 below other instead of side side..
tried many things, display: inline , using delay() jquery queue, problam css think, nut jquery... ideas?
add position: absolute; width: 100%; in container that:
<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>
Comments
Post a Comment