В этой статье речь пойдет о том, как поступить, если стоит задача сделать боковую выдвижную панель.
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;
}
внутренние отступы справа и с лева + 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);
});
});
результата.Ну и в заключении хотелось бы упомянуть, что описанный метод отлично работает в ИЕ 7-8-9, Safari, FF и Chrome.
Автор: Super User
