Ответ 1
Это довольно просто, используя jQuery. Это шаги, которые вы должны предпринять.
- Исправить всплывающее окно в одну сторону экрана, используя фиксированное позиционирование
- Добавьте интерактивную область, в которой пользователь запускает эффект слайда/выхода с помощью
- Создайте анимацию jQuery для включения/выключения содержимого с помощью отрицательных полей
- В обратном вызове анимации, как вы хотите, чтобы триггер отображался (показать/скрыть)
Важно - toggle событие устарело в jQuery 1.8 и удалено в 1.9. Мой первоначальный ответ больше не будет работать. Эта новая версия будет работать как в старой, так и в новой версии jQuery. В этом методе используется обработчик кликов и класс под названием hidden, чтобы определить, нужно ли анимировать всплывающее окно на экране.
JQuery
//when the trigger is clicked we check to see if the popout is currently hidden
//based on the hidden we choose the correct animation
$('#trigger').click( function() {
if ($('#popout').hasClass('hidden')) {
$('#popout').removeClass('hidden');
showPopout();
}
else {
$('#popout').addClass('hidden');
hidePopout();
}
});
function showPopout() {
$('#popout').animate({
left: 0
}, 'slow', function () {
$('#trigger span').html('Close'); //change the trigger text at end of animation
});
}
function hidePopout() {
$('#popout').animate({
left: -40
}, 'slow', function () {
$('#trigger span').html('Show'); //change the trigger text at end of animation
});
}
CSS
/* minimal CSS */
#popout {
position: fixed; /* fix the popout to the left side of the screen */
top: 50px;
left: -40px; /* use a negative margin to pull the icon area of the popout off the edge of the page */
width: 75px;
border: 1px dotted gray;
color: gray;
}
#trigger { /* create a clickable area that triggers the slide in/out effect */
position: absolute; /* position clickable area to consume entire right section of popout (add a border if you want to see for yourself) */
top: 0;
bottom: 0;
right: 0;
cursor: pointer;
}
Исходный ответ (не работает с jQuery 1.9)
$('#toggle').toggle(
function() {
$('#popout').animate({ left: 0 }, 'slow', function() {
$('#toggle').html('Close');
});
},
function() {
$('#popout').animate({ left: -40 }, 'slow', function() {
$('#toggle').html('Show');
});
}
);
<div id="popout">
<div id="toggle">Show</div>
<br style="clear: both" />
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
#popout { position: fixed; height: 100px; width: 75px; border: 1px dotted gray; background: darkblue; color: white; top:50px; left: -40px; }
#toggle { float: right; }