Здравствуйте начинающие программисты.
В этом посте я покажу как сделать открывающуюся панель на странице сайта.
Опция очень полезная, так как у всех владельцев сайтов постоянно не хватает места вверху страницы, для размещения важной информации.
С панелью достаточно будет разместить на видном месте кнопку или логотип с призывной надписью, при нажатии на которую, контент страницы сдвинется вниз, и посетителю откроется дополнительная инфа.
Пользователям WordPress эта опция знакома, только она реализована в админке. Это кнопки Настройки экрана и Помощь
Мы же сделаем подобное на лицевой части.
Несомненным достоинством такой вкладки является и то, что она представляет из себя абсолютно чистую страницу, без шапки, сайдбара и прочих блоков.
Значит на ней можно будет написать всё что угодно — текст, ссылки, картинки, блоки.
У панели есть горизонтальная прокрутка, так что возможности очень большие.
Скрипт написан на 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"); ?>
И сразу после неё вставляем приведённый выше скрипт.
Затем опускаемся в файле чуть ниже и после открывающего <body> вставляем html
CSS вставляем в файл style.css в любом месте.
Для своих стилей, лучше сделать отдельный раздел, т.е поставить комментарий /* Мои стили */, и всё что вы будете добавлять в шаблон, прописывать туда и снабжать подробными комментариями.
Ну вот всё, дополнительная панель готова.
Осталось подогнать оформление и заполнить поле панели.
Желаю творческих успехов.
В раздел >>>
А ну-ка, что там ещё интересного
Слайдер на javascript
Увеличение картинки по клику
Счётчик обратного отсчёта
Пылающий заголовок
Растягивающийся блок
В раздел
В загрузчике wp-includes — script-loader, и в обработчике wp-includes — emded.
А зачем интересно? Она есть везде где есть скрипты работающие на лицо. В плагинах, в подключении скриптов.
Не смог в WordPress найти wp_enqueue_script(). Подскажите, где он находиться?