Данный урок расскажет Вам о том, как сделать выезжающую панель внизу страницы с помощью jQuery.
Подключаем фреймворк и все необходимые скрипты между тегами
<head></head>
<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>
Не забываем про стили оформления:
<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". Без этого панель будет неправильно отображаться.
<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>
