왼쪽메뉴 숨김 버튼을 외부로
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <title>Untitled Document</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script> <script> $(document).ready(function () { $('#btnClick').toggle( function() { $('#B').css({left: 50}); $('#c').css({left: 50}); }, function() { $('#B').css({left:200}); $('#c').css({left:200}); }) $('#btnClick').on('click',function(){ if($('#1').css('display')!='none'){ $('#2').show().siblings('div').hide(); }else if($('#2').css('display')!='none'){ $('#1').show().siblings('div').hide(); } }); }); </script> <style> html, body { margin: 0; padding: 0; border: 0; } #A, #B { position: absolute; } #A { top: 0px; width: 200px; bottom: 0px; background:orange; } #B { top: 0px; left: 200px; right: 0; bottom: 0px; background:green; } #c {position:absolute; left:200px; top:0px; width:60px; z-index:999} #d { position:relative;top:30px; width:990px; background-color:#FFFFCC; margin:0 auto; } </style> </head> <body> <div id="A"> <br> <div id="1"> <span><img src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2012/11/08icon.jpg" width="20"> 링크연결1</span> </div> <div id="2" style="display:none;"> <span><img src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2012/11/08icon.jpg" width="40"></span> </div> </div> <div id="c"> <input type="button" value="닫기" onclick="return change(this);" id="btnClick"/> <script type="text/javascript"> function change( el ) { if ( el.value === "열기" ) el.value = "닫기"; else el.value = "열기"; } </script> </div> <div id="B"> <div id="d">본문 컨덴츠<br><br><br><br></div> </div> </body> </html>
