Side Menu Slider

In dictumst eros ultricies montes, in, vel enim? Scelerisque dapibus, rhoncus magnis, aliquet scelerisque sagittis integer, magnis ac? Pulvinar ac vel! Scelerisque, cursus tortor, lacus urna, rhoncus magnis vut pulvinar, cum magna tincidunt! Tempor non pulvinar. Rhoncus, sit porta, scelerisque phasellus rhoncus scelerisque dictumst ultricies odio adipiscing. Nunc ultrices. Pulvinar nec eu est dolor adipiscing dictumst, adipiscing magnis vel turpis ultrices, tincidunt cum rhoncus porttitor lundium? Odio mauris pulvinar odio aenean nunc velit. Platea tincidunt, nec, purus amet, cras montes, tortor sed integer pulvinar ultricies vel ac facilisis, natoque duis, auctor, penatibus rhoncus rhoncus scelerisque rhoncus. Dignissim eros ac ut habitasse mauris, duis arcu. Quis, enim adipiscing lorem et nec, natoque in. Hac a velit augue! Augue platea turpis nec.

Ut nec magnis, elementum arcu mattis ut a platea, hac, sed, habitasse placerat eu! Quis aliquet facilisis dapibus et, facilisis? Massa odio pulvinar ultricies platea mattis nunc eros dignissim! Nisi magna parturient sociis aliquet pellentesque, integer vut nunc a tempor sed urna nec sociis a, sed dictumst? Aliquet? Aliquam, vel? Integer integer cum, sit magna a integer ac mauris! Montes tempor! Mid sagittis magnis penatibus, pulvinar turpis aliquet, in in mid! Dolor montes cum aliquet dolor pulvinar, non ac scelerisque natoque placerat, sit! Sociis eu. Rhoncus pulvinar lorem nascetur augue a, integer? Nisi tincidunt risus! Natoque est turpis pulvinar et dignissim! Magna turpis pulvinar sociis sit! Enim tincidunt ac, enim lorem tristique et odio nunc in ac amet augue.

Sagittis ridiculus nascetur? Dapibus dolor. Nec, aliquam et cursus nascetur lectus! Rhoncus ridiculus elementum pulvinar nascetur nisi diam nunc mid, augue auctor ac tincidunt mattis amet ultricies, porttitor rhoncus! Rhoncus mid? Lundium augue purus quis? Mid pulvinar integer, sit? Eros porta sed etiam lorem nec, ridiculus adipiscing? Enim sed, tortor et! Nunc est, est non in cursus et nunc? Augue ut non sagittis in sagittis et egestas et porttitor, scelerisque est? Nec phasellus pulvinar risus mid montes lacus, purus aenean? Placerat! Ac et tincidunt vut magna hac, placerat amet nec sed mid lorem et placerat. Mid porta! Vut. Pulvinar, dapibus vut? Eu vel est sed natoque lundium porttitor in nec sit mid in, cras in a, lectus augue in.



HTML 구조

							<div class="semple_wrapper">
								<div id="sampleAside">
									<ul class="sample_sm">
										<li><a href="#">menu1</a></li>
										<li><a href="#">menu2</a></li>
										<li><a href="#">menu3</a></li>
										<li><a href="#">menu4</a></li>
										<li><a href="#">menu5</a></li>
									</ul>
								</div>
								<div id="sampleConts">
									<p class="btn_toggle_area"><a href="#" id="sampleToggle"><img src="/florakid_lib/images/sample2/open.gif" /></a></p>
									contents
								</div>
							</div>
						


CSS

						.semple_wrapper{overflow:hidden;zoom:1;width:100%;position:relative;}
						#sampleAside{float:left;width:100px;background:#eee;}
						#sampleConts{float:left;width:660px;padding:20px;border:1px solid #eee;}
						.sample_sm {padding-top:30px;}
						.sample_sm li a{border-bottom:1px solid #ccc;}
						.btn_toggle_area{position:absolute;top:0;left:0;}							
						


JavaScript

							$(document).ready(function(){
								$("#sampleToggle").sideSlider({
									targetArea:"#sampleAside",
									targetSibling:"#sampleConts",
									sideW:100,
									contW:760,
									btnClose:"/florakid_lib/images/sample2/close.gif",
									btnOpen:"/florakid_lib/images/sample2/open.gif",
								});
							});				
						


Plugin Code

							/* sideSlider.plugin */
							/*
								※ 작성자:florakid
								※ plugin 내용: 사이드 메뉴를 버튼에 의해 열리고 닫히도록 만들어 주는 plugin
								※ toggle 버튼은 현재 .btn_toggle_area class에 의해서 절대값으로 영역을 잡아주고 있다.
								※ 필요시에 (function ($) {...	})(window.jQuery);// end self-exec function 부분을 따로 떼서 jqury.sideSlider.js로 plugin 파일로 만들어 jquery 파일 아래에 분		리해서 놓을 수 있다.
								※ 이벤트 시작은 toggle 버튼으로 설정되어 있으므로 아래의 실행 코드처럼 document.ready 함수 안에서 plugin을 실행하도록 한다.

							*/
							
							/*
								### options :설명 ###
								targetArea : 열리고 닫히는 대상 영역 ex) aside ,
								targetSibling : targetArea에 영향을 받는 이웃요소 ex) contents,
								sideW: targetArea의 width - 기본적성 값 200, 
								contW: targetSibling의 width - 기본적성 값 960,
								btnClose: 닫기버튼의 img 경로,
								btnOpen: 열기버튼의 img 경로,
								moveSpeed: targetArea가 열리고 닫히는 속도 선택 "slow" or "fast" , 기본옵션은 "slow"

							*/

							/* sideSlider Plugin 시작*/
							
							(function ($) {			// start sef-exec function	
								$.fn.sideSlider = function (options) { // start $.fn.sideSlider

									options = $.extend({
										targetArea: "#aside",
										targetSibling: "#contents",
										sideW:200,
										contW:960,
										btnClose:"img/close.gif",
										btnOpen:"img/open.gif",
										moveSpeed:"slow"									
									}, options);
									// end options
								
									return this.each(function () {
										
										// console 옵션 확인
										console.log(options);

										// 대상 참조
										var $btnMenuToggle = $(options.btnToggle);
										var $aside = $(options.targetArea);
										var $contents = $(options.targetSibling);
										var $this = $(this);
										
										// 초기화
										$aside.width(options.sideW-options.sideW);
										$aside.css("overflow","hidden");
										$contents.width(options.contW);
										
										// 이벤트 실행
										$this.toggle(function () {
											$this.find("img").attr("src",options.btnClose);
											$contents.width(options.contW-options.sideW);
											$aside.stop().animate({width:options.sideW},options.moveSpeed);				
										},function () {
											$this.find("img").attr("src",options.btnOpen);			
											$aside.stop().animate({width:options.sideW-options.sideW},options.moveSpeed, function () {
												$contents.width(options.contW);
											});
										});

									})// end return this.each()
								} // end $.fn.sideSlider

							})(window.jQuery);// end self-exec function
							
							/* sideSlider Plugin 끝 */