Выдвигающаяся панель Cookies
В общем, давайте сразу разберем скрипт выдвигающейся панели Cookies. Суть такова: будет панель с каким-либо содержимым. Это может быть просто ссылка, может быть объявление, информация, может быть даже предупреждение. А чтобы эта панель не мешалась всегда, нежно ее скрыть. Чтобы при каждом обновлении не пришлось закрывать эту выдвигающуюся панель, воспользуемся Cookies.
Подключение JQuery и плагина для работы с Cookies (в секции HEAD)
Код HTML (в секции BODY)
Код CSS
#fixmenu — Сама панель
#closefixmenu1 — кнопка закрытия панели
#closefixmenu2 — кнопка открытия панели
Оптимальный вариант – это панель в серых тонах. Вы легко можете изменить цвета в панели: для этого редактируйте цвета в CSS и сами картинки.
Код JavaScript (главное, чтобы этот код был после подключения JQuery)
При нажатии на стрелочку для закрытия панель плавно скрывается и создается запись в Cookies. При повторном переходе на страницу панель будет скрыта, будет видна только стрелочка (только уже направленная вниз, а не вверх).
Подключение JQuery и плагина для работы с Cookies (в секции HEAD)
Code
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="jquery.cookie.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>
Содержимое
<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>
#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>
$(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. Никакого кода!
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (2)
2
2
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Легко! Если пользоваться нашими советами.
