'분류 전체보기' 카테고리의 글 목록 (4 Page)

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

드롭다운메뉴

카테고리 없음 2016. 10. 14. 14:18 |

드롭다운메뉴

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="euc-kr" /> <meta name="author" content="Script Tutorials" /> <title>Click action css3 dropdown menu with jquery | Script Tutorials</title> <style> ol, ul, li, dir, menu { list-style-type:none; margin: 0; padding:0; text-align:left; } /* demo page styles */ body { background:#fff; margin:0; padding:0; font-family:Segoe UI,Tahoma,Arial,Verdana,sans-serif; } /* main menu styles */ .menu { background-color:#d0e6f5; text-align:center; width:990px; margin:0px auto; } .menu > span { display:inline-block; margin:0 auto; } #nav { display:inline; text-align:left; position:relative; list-style-type:none; } #nav > li { float:left; padding:0; position:relative; } #nav > li > a { border:1px solid transparent; color:#4F4F4F; display:block; font-size:90%; padding:3px 10px; position:relative; text-decoration:none; } #nav > li > a:hover { background-color:#e4ecf4; border-color:#999 } #nav > li.selected > a { background-color:#FFFFFF; border-color:#999999 #999999 #FFFFFF; z-index:2; } #nav li div { position:relative; } #nav li div div { background-color:#FFFFFF; border:1px solid #999999; padding:12px 0; display:none; font-size:0.75em; margin:0; position:absolute; top:-1px; z-index:1; width:150px; } #nav li div div.wrp2 { width:300px; } #nav li div div.wrp3 { width:450px; } #nav .sep { left:150px; border-left:1px solid #E3E3E3; bottom:0; height:auto; margin:15px 0; position:absolute; top:0; width:1px; } #nav .sep2 { left:300px; border-left:1px solid #E3E3E3; bottom:0; height:auto; margin:15px 0; position:absolute; top:0; width:1px; } #nav li div ul { padding-left:10px; padding-right:10px; position:relative; width:130px; float:left; list-style-type:none; } #nav li div ul li { margin:0; padding:0; } #nav li div ul li h3 { border-bottom:1px solid #E3E3E3; color:#4F4F4F; font-weight:bold; margin:0 5px 4px; font-size:0.95em; padding-bottom:3px; padding-top:3px; } #nav li ul ul { padding:0 0 8px; } #nav li ul ul li { margin:0; padding:0; } #nav li ul ul li a { color:#0060A6; display:block; margin-bottom:1px; padding:3px 5px; text-decoration:none; font-size:0.9em; } #nav li ul ul li a:hover{ background-color:#0060a6; color:#fff; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <div style="width:990px; height:80px; margin:0px auto;"> Logo & Top </div> <div class="menu"> <span> <ul id="nav"> <li><a href="#">Home</a> <div class="subs"> <div> <ul> <li> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </li> <li>----------- <ul> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> </ul> </li> <li><h3>Submenu #3</h3> <ul> <li><a href="#">Link 9</a></li> <li><a href="#">Link 10</a></li> </ul> </li> </ul> </div> </div> </li> <li><a href="#">Tutorials</a> <div class="subs"> <div> <ul> <li><h3>Submenu #1</h3> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </li> <li><h3>Submenu #2</h3> <ul> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> </ul> </li> <li><h3>Submenu #3</h3> <ul> <li><a href="#">Link 9</a></li> <li><a href="#">Link 10</a></li> </ul> </li> </ul> </div> </div> </li> <li><a href="#">Resources</a> <div class="subs"> <div class="wrp2"> <ul> <li><h3>Submenu #4</h3> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </li> <li><h3>Submenu #5</h3> <ul> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> <li><a href="#">Link 10</a></li> </ul> </li> </ul> <p class="sep"></p> <ul> <li><h3>Submenu #6</h3> <ul> <li><a href="#">Link 11</a></li> <li><a href="#">Link 12</a></li> <li><a href="#">Link 13</a></li> </ul> </li> <li><h3>Submenu #7</h3> <ul> <li><a href="#">Link 14</a></li> <li><a href="#">Link 15</a></li> <li><a href="#">Link 16</a></li> </ul> </li> <li><h3>Submenu #8</h3> <ul> <li><a href="#">Link 17</a></li> <li><a href="#">Link 18</a></li> <li><a href="#">Link 19</a></li> </ul> </li> </ul> </div> </div> </li> <li><a href="https://www.script-tutorials.com/about/">About</a> <div class="subs"> <div class="wrp3" style="width:100%; left:0; position:fixed; top:105px; padding-left:450px; padding-right:450px; clear:both"> <ul> <li><h3>Submenu #4</h3> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </li> </ul> <ul> <li><h3>Submenu #5</h3> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </li> </ul> <ul> <li><h3>Submenu #6</h3> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </li> </ul> <ul> <li><h3>Submenu #7</h3> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </li> </ul> <ul> <li><h3>Submenu #8</h3> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </li> </ul> <ul> <li><h3>Submenu #6</h3> <ul> <li><a href="#">Link 11</a></li> <li><a href="#">Link 12</a></li> <li><a href="#">Link 13</a></li> </ul> </li> </ul> </div> </div> </li> <li><a href="https://www.script-tutorials.com/click-action-css3-dropdown-menu-with-jquery/">Go Back To The Tutorial</a></li> </ul> </span> </div> <script type="text/javascript"> jQuery(window).load(function() { $("#nav > li > a").mouseover(function (e) { // binding onclick if ($(this).parent().hasClass('selected')) { $("#nav .selected div div").slideUp(200); // hiding popups $("#nav .selected").removeClass("selected"); } else { $("#nav .selected div div").slideUp(200); // hiding popups $("#nav .selected").removeClass("selected"); if ($(this).next(".subs").length) { $(this).parent().addClass("selected"); // display popup $(this).next(".subs").children().slideDown(300); } } }); $("#nav > li > div > div").mouseleave(function () { // close on leave $("#nav .selected div div").slideUp(200); // hiding popups $("#nav .selected").removeClass("selected"); }); }); </script> </body> </html>

:

jquery 스크립트 모음

카테고리 없음 2016. 7. 4. 03:13 |

http://www.vomoc.com/

:

우측메뉴 숨기기 cookie 버전

카테고리 없음 2016. 6. 28. 06:02 |

우측메뉴 숨기기 cookie 버전

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <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> /*! * jQuery Cookie Plugin v1.3.1 * https://github.com/carhartl/jquery-cookie * * Copyright 2013 Klaus Hartl * Released under the MIT license */ (function(a,b,c){function e(a){return a}function f(a){return g(decodeURIComponent(a.replace(d," ")))}function g(a){return 0===a.indexOf('"')&&(a=a.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\")),a}function h(a){return i.json?JSON.parse(a):a}var d=/\+/g,i=a.cookie=function(d,g,j){if(g!==c){if(j=a.extend({},i.defaults,j),null===g&&(j.expires=-1),"number"==typeof j.expires){var k=j.expires,l=j.expires=new Date;l.setDate(l.getDate()+k)}return g=i.json?JSON.stringify(g):g+"",b.cookie=[encodeURIComponent(d),"=",i.raw?g:encodeURIComponent(g),j.expires?"; expires="+j.expires.toUTCString():"",j.path?"; path="+j.path:"",j.domain?"; domain="+j.domain:"",j.secure?"; secure":""].join("")}for(var m=i.raw?e:f,n=b.cookie.split("; "),o=d?null:{},p=0,q=n.length;q>p;p++){var r=n[p].split("="),s=m(r.shift()),t=m(r.join("="));if(d&&d===s){o=h(t);break}d||(o[s]=h(t))}return o};i.defaults={},a.removeCookie=function(b,c){return null!==a.cookie(b)?(a.cookie(b,null,c),!0):!1}})(jQuery,document); </script> <script> $(document).ready(function () { // setup the initial display on page load var menu_state = $.cookie('welcome'); if( (typeof menu_state !== "undefined") && (menu_state == "hidden")) { $('#welcome_block').css("visibility", "hidden"); $('#welcome_show').css("visibility", "visible"); // visible, and cookie is set } else { $('#welcome_show').css("visibility", "hidden"); $('#welcome_block').css("visibility", "visible"); // hidden or cookie is not set, set just in case } $('.disabled').click(function() { $('#welcome_block').css("visibility", "hidden"); $('#welcome_show').css("visibility", "visible"); $.removeCookie('welcome'); // prevent multiple instances $.cookie('welcome', 'hidden'); // update (or set) the cookie $(".disabled").css("display", "none"); $(".enabled").css("display", "block"); //console.log( $.cookie('welcome') ); }); $('.enabled').click(function() { $('#welcome_block').css("visibility", "visible"); $('#welcome_show').css("visibility", "hidden"); $.removeCookie('welcome'); // prevent multiple instances $.cookie('welcome', 'visible'); // update (or set) the cookie $(".disabled").css("display", "block"); $(".enabled").css("display", "none"); //console.log( $.cookie('welcome') ); }); }); </script>  <style> html, body { margin: 0px; padding: 0px; border: 0px; } #welcome_show, #welcome_block { top: 100px; position:fixed; height: 500px; right:0px; background:orange; z-index:999; } #B { width:100%; background:green; } #d { top:0px; width:990px; background-color:#FFFFCC; margin:0 auto; } </style> </head> <body> <div id="welcome_block"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td height="25px"><a class="disabled" style="cursor:pointer">열기</a></td> </tr> <tr> <td height="25px"><img src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2012/11/08icon.jpg" width="40"></td> </tr> </table> </div> <div id="welcome_show"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td height="25px"><a class="enabled" style="cursor:pointer">닫기</a></td> </tr> <tr> <td height="25px"><img src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2012/11/08icon.jpg" width="20"> 링크연결1</td> </tr> </table> </div> </div> <div id="B"> <div id="d"> <p>본문 컨덴츠</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> </body> </html>

:

우측메뉴 숨기기 버전별..

카테고리 없음 2016. 6. 28. 03:35 |

우측메뉴 숨기기 버전별..

다른버전

<!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 type="text/javascript" src="jquery.cookie.min.js"></script> <script> $(document).ready(function () { var $plansHolders = $('#wide, #narr').hide(); $('#wide').show(); $('.plansSwitch').click(function() { var href = $(this).attr('href'); console.log(href); $plansHolders.hide(); console.log(href); $(href).show(); }) }); </script> <style> html, body { margin: 0px; padding: 0px; border: 0px; } #A { top: 100px; position:fixed; height: 500px; right:0px; background:orange; z-index:999 } #B { width:100%; background:green; } #c { position:fixed; right:200px; top:100px; z-index:999 } #d { top:0px; width:990px; background-color:#FFFFCC; margin:0 auto; } </style> </head> <body> <div id="A"> <div id="wide" style="width:200px; background-color:yellow"> <span><img src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2012/11/08icon.jpg" width="20"> 링크연결1</span> <a class='plansSwitch' href='#narr'>좁게</a> </div> <div id="narr" style="display:none;width:50px; background-color:blue" align="right"> <span><img src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2012/11/08icon.jpg" width="40"></span> <a class='plansSwitch' href='#wide'>넓게</a></div> </div> <div id="c"> </div> <div id="B"> <div id="d"> <p>본문 컨덴츠</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> </body> </html>

다른버전

<!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 type="text/javascript" src="jquery.cookie.min.js"></script> <script> $(document).ready(function () { $("#show-wide").click(function(event) { $("#wide").hide(); $("#narr").show(); }); $("#show-narr").click(function(event) { $("#wide").show(); $("#narr").hide(); }); }); </script> <style> html, body { margin: 0px; padding: 0px; border: 0px; } #A { top: 100px; position:fixed; height: 500px; right:0px; background:orange; z-index:999 } #B { width:100%; background:green; } #c { position:fixed; right:200px; top:100px; z-index:999 } #d { top:0px; width:990px; background-color:#FFFFCC; margin:0 auto; } </style> </head> <body> <div id="A"> <div id="wide" style="width:200px; background-color:yellow"> <span><img src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2012/11/08icon.jpg" width="20"> 링크연결1</span> <a id="show-wide" style="cursor:pointer">좁게</a> </div> <div id="narr" style="display:none;width:50px; background-color:blue" align="right"> <span><img src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2012/11/08icon.jpg" width="40"></span> <a id="show-narr" style="cursor:pointer">넓게</a></div> </div> <div id="c"> </div> <div id="B"> <div id="d"> <p>본문 컨덴츠</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> </body> </html>

:

왼쪽숨김버튼 독립레이어로

카테고리 없음 2016. 6. 27. 20:40 |

왼쪽숨김버튼 독립레이어로

<!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() { $('#a').css({width: 50}); $('#c').css({right: 50}); }, function() { $('#a').css({width:200}); $('#c').css({right: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: 0px; padding: 0px; border: 0px; } #A { top: 100px; position:fixed; height: 500px; right:0px; background:orange; z-index:999 } #B { width:100%; background:green; } #c { position:fixed; right:200px; top:100px; z-index:999 } #d { top:0px; width:990px; background-color:#FFFFCC; margin:0 auto; } </style> </head> <body> <div id="A"> <div id="1" style="width:200px"> <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;width:50px" align="right"> <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"> <p>본문 컨덴츠</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> </body> </html>

:

왼쪽메뉴 숨김 버튼을 외부로

카테고리 없음 2016. 6. 27. 19:44 |

왼쪽메뉴 숨김 버튼을 외부로

<!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>

:

왼쪽메뉴 내용 바꾸기

카테고리 없음 2016. 6. 27. 18:23 |

왼쪽메뉴 내용 바꾸기

<!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}) }, function() { $('#B').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; } </style> </head> <body> <div id="A"> <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> <br> <div id="1"> 열렸을때 </div> <div id="2" style="display:none;"> 아이콘 </div> </div> <div id="B">내용컨덴츠</div> </body> </html>

:

모바일 프레임

카테고리 없음 2016. 6. 27. 16:41 |

모바일 프레임

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>My App</title> <link rel="stylesheet" href="http://framework7.io/dist/css/framework7.ios.min.css"> <link rel="stylesheet" href="http://framework7.io/dist/css/framework7.ios.colors.min.css"> </head> <body> <div class="panel-overlay"></div> <div class="panel panel-left panel-reveal"> <div class="content-block"> <p>Left Panel content here</p> <p><a href="#" class="close-panel">Close me</a></p> <p><a href="#" data-panel="right" class="open-panel">Open Right Panel</a></p> </div> </div> <div class="panel panel-right panel-cover"> <div class="content-block"> <p>Right Panel content here</p> <p><a href="#" class="close-panel">Close me</a></p> <p><a href="#" data-panel="left" class="open-panel">Open Left Panel</a></p> </div> </div> <div class="views"> <div class="view view-main"> <div class="pages"> <div data-page="home" class="page navbar-fixed"> <div class="navbar"> <div class="navbar-inner"> <div class="left"> </div> <div class="center">Panels</div> <div class="right"> </div> </div> </div> <div class="page-content"> <div class="content-block"> <p> <a href="#" class="open-panel">Open Left Panel</a></p> <p> <a href="#" data-panel="right" class="open-panel">Open Right Panel</a></p> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="http://framework7.io/dist/js/framework7.min.js"></script> <script>var myApp = new Framework7();</script> </body> </html>

:

왼쪽메뉴 열고닫기

카테고리 없음 2016. 6. 27. 16:30 |

왼쪽메뉴 열고닫기(슬라이드)

<!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 () { $('button').toggle( function() { $('#B').animate({left: 0}) }, function() { $('#B').animate({left:200}) }) }); </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; } </style> </head> <body> <div id="A"></div> <div id="B"><button>toggle</button></div> </body> </html>

css

<!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 () { $('button').toggle( function() { $('#B').css({left: 0}) }, function() { $('#B').css({left:200}) }) }); </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; } </style> </head> <body> <div id="A"></div> <div id="B"><button>toggle</button></div> </body> </html>

:

div 고정 하단에서 풀림

카테고리 없음 2016. 6. 24. 05:32 |

http://golf.myo2o.com/hawni.asp

http://golf.myo2o.com/hawni2.asp

http://golf.myo2o.com/hawni3.asp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <title>CSS Tutorial | Layout</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://www.tbctour.com/script/jquery-scrolltofixed.js" type="text/javascript"></script> <script> $(document).ready(function() { $('#header').scrollToFixed(); $('#asides').scrollToFixed({ marginTop: $('#header').outerHeight(true) + 0, limit: function() { var limit = $('#footer').offset().top - $('#asides').outerHeight(true) - 0; return limit; }, minWidth: 1000, zIndex: 999, fixed: function() { }, dontCheckForPositionFixedSupport: true }); }); </script> <style> #ibody { width: 100%; padding: 0px; } #header { height:90px; border: 1px solid #bcbcbc; } #cwrap{width:1115px; margin:0 auto;height:100%;} #content { width: 990px; float: left; border: 1px solid #bcbcbc; } #right { width: 110px; height:100%; float: right; border: 1px solid #bcbcbc; } #asides { width: 100px; margin:0 auto; } #footer { clear: both; border: 1px solid #bcbcbc; } body, html { height: 100%; } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } </style> </head> <body> <div id="ibody"> <div id="header"> <table width="1115" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="90" bgcolor="#99FFFF"> </td> </tr> </table> </div> <div id="cwrap"> <div id="content"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="2000" bgcolor="#FFFFCC"> </td> </tr> </table> </div> <div id="right"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="100" bgcolor="#CCCCFF"> </td> </tr> <tr> <td> </td> </tr> <tr> <td> <div id="asides"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="20" bgcolor="#000000"> </td> </tr> <tr> <td height="1000" bgcolor="#CCCCCC"> </td> </tr> <tr> <td height="20" bgcolor="#000000"> </td> </tr> </table> </div> </td> </tr> </table> </div> </div> <div id="footer"> <table width="1115" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="70" bgcolor="#66FFCC"> </td> </tr> </table> </div> </div> </body> </html>

:

공지사항

카테고리

태그

최근글

최근댓글

최근트랙백

Archives

Links

'분류 전체보기'에 해당되는 글 81건

드롭다운메뉴

jquery 스크립트 모음

우측메뉴 숨기기 cookie 버전

우측메뉴 숨기기 버전별..

왼쪽숨김버튼 독립레이어로

왼쪽메뉴 숨김 버튼을 외부로

왼쪽메뉴 내용 바꾸기

모바일 프레임

왼쪽메뉴 열고닫기

div 고정 하단에서 풀림

티스토리툴바