Боковая выдвижная панель jQuery

В этой статье речь пойдет о том, как поступить, если стоит задача сделать боковую выдвижную панель.

HTML разметка останется почти такой же - понадобится лишь перенести кнопку в блок slide_panel и задать ей класс, например, open (вместо абзаца p кнопку можно обернуть в любой другой допустимый тег - div, span, a и т.д.):

<div class="slide_panel_wrap">
	<p></p>
	<div class="slide_panel">
		<p class="open">Открыть</p>
		<p>В этом блоке может содержаться любой контент.</p>
		<p>В этом блоке может содержаться любой контент. В этом блоке может содержаться любой контент.</p>
		<p>В этом блоке может содержаться любой контент.</p>
	</div>
</div>

Теперь "причешем" конструкцию, что бы на нее было приятнее смотреть:

.slide_panel_wrap {
margin:40px auto;
width:300px;
position:relative; /*обязательное свойство*/
overflow:hidden; /*обязательное свойство*/
}
.slide_panel {
margin-left:-201px; /*обязательное свойство*/
padding:20px; 
width:160px; 
position:relative; /*обязательное свойство*/
top:0; /*обязательное свойство*/
left:0; /*обязательное свойство*/
border:1px solid #367aab;
}
.slide_panel p.open {
padding:3px 5px;
position:absolute; /*обязательное свойство*/
top:10px; /*обязательное свойство*/
left:200px; /*обязательное свойство*/
border:1px solid #367aab;
cursor:pointer;
}

Для блока-обертки .slide_panel обязательно задаем ширину width (в нашем случае она будет равна 202px - 160px ширина текста + 20px внутренние отступы справа и с лева + 2px рамка справа и с лева), с помощью свойств position:relative;, top:0; и left:0; прижимаем блок с текстом к левой стороне и свойством margin-left:-201px; прячем его (останется видимым только правая рамка).

Ну и наконец, блок с кнопкой p.open при помощи свойств position:absolute;, top:10px; и left:200px; позиционируем с правой части текстового блока (что бы он всегда оставался видимым).

Теперь осталось только написать небольшой js код, что бы панель заработала:

$(document).ready(function(){		  
	$("div.slide_panel p.open").toggle(function(){
		$("div.slide_panel").animate({left:'201px'},500);}, function() {
		$("div.slide_panel").animate({left:0},500);
	}); 
});

Скрывать и показывать панель будем с помощью методов toggle и animate. По умолчанию панель скрыта. Когда произойдет щелчек по кнопке, с помощью animate сдвинем вправо панель на 201px ({left:'201px'}) за полсекунды (500). При повторном клике панель сдвинется в обратном направлении за такое же время.

Если требуется прижать панель к правому краю, то нужно всего лишь внести соответствующие изменения в css и js, что бы достичь желаемого результата.

Ну и в заключении хотелось бы упомянуть, что описанный метод отлично работает в ИЕ 7-8-9, Safari, FF и Chrome.