jquery - Need suggection on html CSS javascript hover & slide -


i need little suggestion, fiddle, , html:

<div style="width: 100%; border: 1px solid #000000;">         <div style="float: left; width: 20%;">logo + <a href="#">sub nav icon</a></div>         <div style="float: left; width: 60%;">canter header portion</div>         <div style="float: left; width: 20%;">right postion</div>         <br clear=all>   </div> <div style="width: 100%;  border: 1px solid #000000; margin-top: 10px;">     <div style="float: left; width: 20%">sub menu hidden</div>     <div style="float: left; width: 80%">         <div style="float: left; width: 60%">image area</div>         <div style="float: left; width: 40%">text area</div>         <br clear=all>     </div>     <br clear=all> </div> 

(note copied , pasted in edit not op, code has not been edited correctness.)

what need when click on 'sub nav icon link' sub menu hidden second div should open in slide down method, , should shift 80% width container right & adjust available width accordingly. then, when click on 'close' link sub menu should close sliding , 80% width take 100% width.

any appreciated.

as per code need write jquery using animate show/ hide submenu demo

$('.open').click(function(){     $(this).hide();     $('.close').show();     $('.content').animate({ marginleft: '20%' });     $('.smenu').animate({ marginleft: '0' }); }); $('.close').click(function(){     $(this).hide();     $('.open').show();     $('.content').animate({ marginleft: '0' });     $('.smenu').animate({ marginleft: '-20%' }); }); 

Comments

Popular posts from this blog

c# - How to get the current UAC mode -

postgresql - Lazarus + Postgres: incomplete startup packet -

javascript - Ajax jqXHR.status==0 fix error -