Главная » Полезные статьи » Язык 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

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи