Дополнительная панель для сайта

Здравствуйте начинающие программисты.

В этом посте я покажу как сделать открывающуюся панель на странице сайта.

Опция очень полезная, так как у всех владельцев сайтов постоянно не хватает места вверху страницы, для размещения важной информации.

С панелью достаточно будет разместить на видном месте кнопку или логотип с призывной надписью, при нажатии на которую, контент страницы сдвинется вниз, и посетителю откроется дополнительная инфа.

Пользователям WordPress эта опция знакома, только она реализована в админке. Это кнопки Настройки экрана и Помощь

40

Мы же сделаем подобное на лицевой части.

Несомненным достоинством такой вкладки является и то, что она представляет из себя абсолютно чистую страницу, без шапки, сайдбара и прочих блоков.

Значит на ней можно будет написать всё что угодно — текст, ссылки, картинки, блоки.

У панели есть горизонтальная прокрутка, так что возможности очень большие.

Скрипт написан на jQueri, которая по умолчанию есть на каждой CMS, поэтому он состоит всего из нескольких строк.

Остальное html и css.

Посмотреть его работу можно на другом моём сайте Секреты и Нюансы.

Так как сайт по строительству и ремонту, я разместил в панели калькуляторы для подсчёта стройматериалов нужных для стройки, и подсчёта площадей и объёмов конструкций.

Поведенческие факторы возросли резко.

Доводку содержания и внешнего вида панели Вы, скорее всего, будете делать в редакторе файлов, поэтому вам потребуется jQuery.

Можете скачать её по этой ссылке с моего Яндекс Диска.

Итак скрипт:

<script>
jQuery(document).ready(function() {
	jQuery("#open").click(function(){
		jQuery("div#panel").slideDown("slow");	
	});		
	jQuery("#close").click(function(){
		jQuery("div#panel").slideUp("slow");	
	});			
	jQuery("#toggle a").click(function () {
		jQuery("#toggle a").toggle();
	});				
});
</script>

HTML

<div id="toppanel">
	<div id="panel">
		<div class="content clearfix">

<!--Здесь размещается контент панели-->

                </div>
	</div> 

	<div class="tab">
		<ul class="login">

	        <li class="welcome"></li>			
			<li id="toggle">
<!--В ссылке вместо обязательного атрибута href, используется обязательный атрибут name-->
				<a name="" id="open" class="open" >Открыть<</a>
				<a name="" id="close" style="display: none;" class="close" >Закрыть<</a>			
			</li>
		</ul> 
	</div> 	
</div> 

CSS

.clear {
	clear: both;
	height: 0;
	line-height: 0;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}

.tab {
	border-top: 2px solid #555555;
	height: 42px;
	position: relative;
	top: 0;
	z-index: 999;
}
.tab ul.login {
	display: block;
	position: relative;
	float: right;
	clear: right;
	height: 42px;
	width: auto;
	font-weight: bold;
	line-height: 42px;
	margin: -2px 0 0;
	right: 283px;
	font-size: 80%;
}
.tab ul.login li.welcome {
	text-align: left;
	padding: 0 6px;
	display: block;
	float: left;
	height: 42px;
}
.tab .sep {
	border: 2px solid #555555;
}
.tab ul.login li#toggle {
	border: 1px solid #555555;
	display: block;
	height: 42px;
	padding: 0 6px;
	text-decoration: none;
}
.tab a.open {
	height: 20px;
	line-height: 20px !important;
	cursor: pointer;
	display: block;
	width: 60px;
	position: relative;
	top: 11px;
}
.tab a.close{
	height: 20px;
	line-height: 20px !important;
	cursor: pointer;
	display: block;
	width: 60px;
	position: relative;
	top: 11px;   
}
#toppanel {
	position: relative;
	top: 0;
	width: 100%;
	z-index: 999;
	margin-left: auto;
	margin-right: auto;    
}
#panel {
	width: 99%;
	width-max: 1360px;
	box-shadow: 0 2px 4px #000000;
	height: 450px;	
	position: relative;
	z-index: 3;
	display: none;
	overflow: auto;
}

Теперь посмотрим, как его подключить к сайту. Но должен предупредить, что стили для каждого шаблона придётся доводить дополнительно.

Дело в том, что формам и таблицам, в силу их частого применения, во всех шаблонах обычно задаётся оформление, о оно не всегда подойдёт для панели.

Например, могут быть заданы большие отступы, слишком мелкий шрифт и своё позиционирование.

Если кому-то подключить и отладить работу скрипта окажется не по силам, то на бирже фриланса вам это сделают примерно за 500 рублей.

Согласитесь — не большая цена за такую классную опцию.

Попасть на фриланс можно вот по этой ссылке Биржа Фриланса

А теперь посмотрим, как подключить панель к вордпресс.

Панель по умолчанию позиционируется по верху того блока, в котором расположен скрипт, значит размещать его надо в файле <head> Шаблона.

Для начала подключим скрипт и укажем что он будет работать на лицевой части сайта. Для этого в WordPress есть специальная функция wp_enqueue_script().

Заходим в редактор файла header.php и перед закрывающим </head> пишем следующую строку:

<?php wp_enqueue_script("jquery"); ?>

И сразу после неё вставляем приведённый выше скрипт.

41

Затем опускаемся в файле чуть ниже и после открывающего <body> вставляем html

42

CSS вставляем в файл style.css в любом месте.

Для своих стилей, лучше сделать отдельный раздел, т.е поставить комментарий /* Мои стили */, и всё что вы будете добавлять в шаблон, прописывать туда и снабжать подробными комментариями.

Ну вот всё, дополнительная панель готова.

Осталось подогнать оформление и заполнить поле панели.

Желаю творческих успехов.


Запись опубликована в рубрике Уроки javascript и jQuery. Добавьте в закладки постоянную ссылку.

2 комментария на «Дополнительная панель для сайта»

  1. stariс говорит:

    В загрузчике wp-includes — script-loader, и в обработчике wp-includes — emded.

    А зачем интересно? Она есть везде где есть скрипты работающие на лицо. В плагинах, в подключении скриптов.

  2. Борис говорит:

    Не смог в WordPress найти wp_enqueue_script(). Подскажите, где он находиться?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *