javascript - collapsing vertical menu while using css tables -
i have 3 column layout made css tables each column can fill browser perfectly. first column menu , need hide / move left on click , middle column fill in space. should not move out of screen leave little bit exposed user can click area have animate in.
heres fiddle...http://jsfiddle.net/vjmfq/
right noticed first column wont move unless either display:none content inside or animate content width 0px(but want column little exposed dont want eliminating content).
i tried animating inner contents width down when animate width comes in both sides, trick wouldnt work, example , inner content should butt against right side of first column if use float:right messes content in middle column, content in first row against side using margin-left...and if animate width down doesnt animate left side, width gets smaller both sides @ same time.
$(document).ready(function() { $(".two").click( function(event){ event.preventdefault(); if ($(this).hasclass("isdown") ) { //show before animation! $(".one").stop().animate({width:"197px"}, 170); $(".one div").stop().animate({width:"137px"}, 310, function(){ }); $(this).removeclass("isdown"); } else { //hide after animation! $(".one").stop().animate({width:"10px"}, 310); $(".one div").stop().animate({width:"5px"}, 310, function(){ }); $(this).addclass("isdown"); } return false; }); });
like said can moving without content inside reducing width code supplied trying content inside doesnt work.
i love able first column marginleft:-185px , pull middle section on doesnt move column think because of css table layout
ok, think widths. need remove width div.two
, , in animate functions, make sure end div.one
being 50px (margin-left) wider div.one div
. @ least, seems work me. http://jsfiddle.net/vjmfq/1/
Comments
Post a Comment