Выдвижная боковая панель на jQuery (Super User)
Скрипт:
Стиль:
Контент:
Код
<script language="JavaScript">
$(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);
});
});
</script>
$(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);
});
});
</script>
Стиль:
Код
<style>
.slide_panel_wrap {
margin:40px auto;
width:300px;
position:absolute;
overflow:hidden;
}
.slide_panel {
margin-left:-201px;
padding:20px;
width:160px;
position:fixed;
top:0;
left:0;
background:#FFFFFF;
border:1px solid #000000;
}
.slide_panel p.open {
padding:3px 5px;
position:absolute;
top:10px;
left:200px;
background:#FFFFFF;
border:1px solid #000000;
cursor:pointer;
}
</style>
.slide_panel_wrap {
margin:40px auto;
width:300px;
position:absolute;
overflow:hidden;
}
.slide_panel {
margin-left:-201px;
padding:20px;
width:160px;
position:fixed;
top:0;
left:0;
background:#FFFFFF;
border:1px solid #000000;
}
.slide_panel p.open {
padding:3px 5px;
position:absolute;
top:10px;
left:200px;
background:#FFFFFF;
border:1px solid #000000;
cursor:pointer;
}
</style>
Контент:
Код
<div class="slide_panel_wrap">
<div class="slide_panel">
<p class="open">Открыть</p>
<p>В этом блоке может содержаться любой контент.</p>
</div>
</div>
<div class="slide_panel">
<p class="open">Открыть</p>
<p>В этом блоке может содержаться любой контент.</p>
</div>
</div>
Просмотров: 875, Загрузок: 0, Оценка: 5.0 (1)
Страницы: | |