Главная › Новости

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

Опубликовано: 23.08.2018

Как установить плавающую панель на Рабочий стол

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

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

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

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

Панель управления хостингом сPanel. Обзор возможностей.

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

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

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

Lineage 2 Client Edit - Добавляем 2ую дополнительную панель

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

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

Скрипт написан на 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"); ?&gt

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

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

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

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

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

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

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