Данный урок расскажет Вам о том, как сделать выезжающую панель внизу страницы с помощью jQuery. Подключаем фреймворк и все необходимые скрипты между тегами <head></head>:
Code
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function() {
var easing_type = 'easeOutBounce';
var default_dock_height = '40';
var expanded_dock_height = $('#dock').height();
var body_height = $(window).height() - default_dock_height;
$('#fake-body').height(body_height);
$('#dock').css({'height': default_dock_height, 'position':'absolute', 'top': body_height});
$(window).resize(function () {
updated_height = $(window).height() - default_dock_height;
$('#fake-body').height(updated_height);
$('#dock').css({'top': updated_height});
});
$('#dock').mouseover(function () {
expanded_height = $(window).height() - expanded_dock_height;
$(this).animate({'height':expanded_dock_height,'top': expanded_height},{queue:false, duration:800, easing: easing_type});
}).mouseout(function () {
body_height = $(window).height() - default_dock_height;
$(this).animate({'height':default_dock_height,'top': body_height},{queue:false, duration:800, easing: easing_type});
});
});
</script>
Не забываем про стили оформления:
Code
<style>
body {
margin:0;
padding:0
}
#fake-body {
overflow:auto;
z-index:1;
}
#dock {
background:#ccc url(bg.gif) repeat-x;
height:200px;
z-index:100;
width:100%;
}
</style>
И теперь давайте взглянем на структуру тела документа. Обязательно необходимо все содержание тега <body> поместить в слой с id="fake-body". Без этого панель будет неправильно отображаться.
Code
<div id="fake-body">
<!-- Put your entire website in this section -->
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div id="dock">
<!-- Put your dock in this section -->
</div>
