Выдвигающаяся панель Cookies

Выдвигающаяся панель Cookies

02012-06-1121762Денис Абдуллин
В общем, давайте сразу разберем скрипт выдвигающейся панели Cookies. Суть такова: будет панель с каким-либо содержимым. Это может быть просто ссылка, может быть объявление, информация, может быть даже предупреждение. А чтобы эта панель не мешалась всегда, нежно ее скрыть. Чтобы при каждом обновлении не пришлось закрывать эту выдвигающуюся панель, воспользуемся Cookies.

Подключение JQuery и плагина для работы с Cookies (в секции HEAD)

Code
<script type="text/javascript" src="jQuery.js"></script>  
<script type="text/javascript" src="jquery.cookie.js"></script>


Код HTML (в секции BODY)

Code
<div id="fixbox">  
Содержимое  
<div id="closefixbox1"></div>  
</div>  
<div id="closefixbox2"></div>


Код CSS

Code
<style type="text/css">
#fixbox {  
position:fixed;/*!*/  
top:0;/*!*/  
left:0;/*!*/  
width:100%;/*!*/  
background:url(img/fon.png) repeat-x #e5e5e5;  
border-bottom:1px solid #999;  
padding:3px;  
margin:0;  
z-index:999999;/*!*/  
font-size:12px;  
}  
#closefixbox1 {  
background:url(img/strelka.png) no-repeat;  
width:7px;  
height:8px;  
float:right;  
margin:5px 15px 5px 0;  
line-height:normal;  
cursor:pointer;  
}  
#closefixbox2 {  
position:fixed;/*!*/  
top:-30px;/*!*/  
right:0;/*!*/  
background:url(img/strelka.png) no-repeat bottom;  
width:7px;  
height:8px;  
float:right;  
margin:5px 10px 5px 0;  
cursor:pointer;  
z-index:888888;/*!*/  
}  
</style>


#fixmenu — Сама панель
#closefixmenu1 — кнопка закрытия панели
#closefixmenu2 — кнопка открытия панели

Оптимальный вариант – это панель в серых тонах. Вы легко можете изменить цвета в панели: для этого редактируйте цвета в CSS и сами картинки.

Код JavaScript (главное, чтобы этот код был после подключения JQuery)

Code
<script type="text/javascript">  
$(document).ready(function(){  
var height = ($('#fixbox').outerHeight(true))+5  
//Узнаем высоту панели и  
//прибавляем к ней 5px на  
//всякий случай  
var height2 = height-10  
var fixmenu = $.cookie('fixmenu');  
if(fixmenu == 'none'){//Делаем проверку Cookies
$('#fixbox').css('top','-300px')  
$('#closefixbox2').css('top','0px')  
}  
$('#closefixbox1').click(function() {  
$.cookie('fixmenu', 'none', { expires: 7});  
$('#fixbox').animate({'top':'-'+height}, 150)  
$('#fixbox').animate({'top':'-'+height2}, 70)  
$('#fixbox').animate({'top':'-'+height}, 30)  
$('#closefixbox2').delay(200).animate({'top':'0px'}, 300)  
});  
$('#closefixbox2').click(function() {  
$.cookie('fixmenu', 'yes', { expires: 7});  
$('#fixbox').animate({'top':'0'}, 150)  
$('#closefixbox1').animate({'top':'-30px'}, 50)  
});  
});  
</script>


При нажатии на стрелочку для закрытия панель плавно скрывается и создается запись в Cookies. При повторном переходе на страницу панель будет скрыта, будет видна только стрелочка (только уже направленная вниз, а не вверх).

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (2)
Гость 2013-02-09 в 21:43 / МатериалСпам
Спасибо! То что нужно и без всякой воды!
2
Филипп 2012-06-12 в 14:15 / МатериалСпам
​Спасибо давно искал
2
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.