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