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

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

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

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

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

Пользователям 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 не будет опубликован. Обязательные поля помечены *