Делаем всплывающую / свёртывающуюся панель на JavaScript

Делаем всплывающую информационную панель на 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".

главная новости услуги портфолио контакты
главная / JavaScript / Делаем всплывающую / свёртывающуюся панель на JavaScript Делаем всплывающую / свёртывающуюся панель на JavaScript Делаем всплывающую информационную панель на 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	AdSense CMS CSS DLE Google Google Adwords HTML JavaScript Joomla CMS MySQL PHP PR SAPE SEO Web-дизайн XML Анализ Биржи ссылок Внешняя оптимизация Внутренняя оптимизация Графика Домены Заработок в интернете Защита сайта Индексация сайтов Интернет-маркетинг Ключевые слова Контекстная реклама Контент Методы продвижения Новости Обмен ссылками Основы продвижения Ошибки web-дизайна Поисковые системы Полезные сервисы Портфолио Семантическое ядро Советы по продвижению Создание сайтов Социальные сети ТИЦ Траст Трафик Файлообменники Хостинг Яндекс КОНТАКТЫ г. Екатеринбург info@vismech.ru
текущее: Javascript: Графическое меню на MooTools JavaScript: появление картинки в другом месте при нажатии на картинку Как восстановить пароль администратора в Joomla 1.5? НОВОСТИ 05.12.2013 - Уход за флэш-накопителем 05.12.2013 - Компьютер самопроизвольно выключается 05.12.2013 - Почему не запускается компьютер? 27.11.2013 - Canon Legria HF R406 - Описание видеокамеры 27.11.2013 - TravelMate P645 новый лэптоп бизнес-класса от Acer