Июнь 17th, 2012 
Archi Делаем всплывающую информационную панель на JavaScript сверху сайта. Она может служить для уведомления посетителей о новой и важной информации, рекламе ваших услуг и товаров, ссылок и всего чего хотите. Прячется и раскрывается по нажатию на ссылку (кнопку), резервируя и убирая за собой отступ сверху.
Пример панели можно посмотреть . При раскрытой панели весь сайт смещается вниз, чтобы хедер не закрывался содержимым информационного блока с проектами. Можно всплывающий блок сделать и поверх, установив у фона необходимую прозрачность, но нам требовалась именно такая реализация.
Сразу приводим кусок кода из файла шаблона
...
<body>
<script type="text/javascript">
$(document).ready(function(){
if ($.cookie("panel_status") === null) $.cookie("panel_status", "1");
if ($.cookie("panel_status") == 1) {$("#panel").show(); document.getElementById("wrapper").style.paddingTop="20px";}
if ($.cookie("panel_status") == 0) $("#panel_open").show();
$("#panel_close_btn").click(function () {
$("#panel").slideUp(100);
$("#panel_open").show();
document.getElementById("wrapper").style.paddingTop="0px";
$.cookie("panel_status", "0");
});
$("#panel_open_btn").click(function () {
$("#panel_open").hide();
$("#panel").slideDown(100);
document.getElementById("wrapper").style.paddingTop="20px";
$.cookie("panel_status", "1");
});
});
</script>
<div id="panel">
<div style="float:right;"><a id="panel_close_btn">спрятать проекты</a></div>
<div style="width:1000px;margin:auto;">
<span>Наши проекты: </span>
<a href="http://top30thebest.ru/" target="_blank" title="ТОП 30">Top 30</a> |
<a href="http://mayabattle.com/" target="_blank" title="MAYA">MAYA</a> |
<a href="http://fatherfest.ru/" target="_blank" title="FatherFest">Father Fest</a> | Hip-Hop Fight | Битва Улиц
</div>
</div>
<script type="text/javascript">$("#panel").hide();</script>
<div id="panel_open">
<div style="float:right;" id="panel_open_btn"><a>показать проекты</a></div>
</div>
<div id="wrapper">
...
Жирным выделены идентификаторы, по которым происходит обработка javascript’ом в начале кода.
Свойство paddingTop задаёт смещение — style=»padding-top:20px;» у обёртывающего блока div с id=»wrapper».
Источник: loco.ru
Опубликовано в рубрике 
Метки: