Приветствую вас, уважаемые читатели блога. На связи Денис Чернятинский. На повестке дня: решил вам рассказать об интересном инструменте плавающего меню помощи, которое можно установить на любом блоге или сайте. Такой инструмент очень удобен пользователю и сводит к минимуму его действия до получения результата.
Плавающее меню
Пример реализации такого меню вы можете видеть на моем блоге. Зайдя на мой сайт, в левой части окна браузера появляется квадратная пиктограмма, если на нее навести, появляется специальная подсказка «Нужна помощь». Нажав на нее, появятся дополнительные пункты меню, их можно изменять, удалять и добавлять, а также редактировать цвета и новые иконки. Об этом я распишу подробнее в этой статье.
Вставка кода на сайт
Начнем со вставки кода, которые вы можете скачать по приведенной ссылке. Вам нужно распаковать архив, в нем вы найдете два демо-файла. Можете посмотреть, как все работает, нажав на каждый демо-файл.
Выбираем понравившейся вариант и открываем его для редактирования. Я использую программу notepad++, которая отлично подходит для таких задач. Открыв html файл, находим две части кода, как на изображении ниже и поочередно копируем их.
Открываем главный файл вашего сайта, например, «index.html«, если это сайт на каком-то движке, то вставлять советую перед закрывающим тегом body.
</body>
В WordPress данный тег находится в файле «footer.php». Вот изображение моей вставки кода на свой блог.
Выводим стили в отдельный файл
Теперь нам нужно стилизовать данный код,это значит -подключить к нему соответствующие стили оформления, чтоб все выглядело красиво и динамично. Для этого заходим в тот же демо-файл и копируем строки со стилями, то есть все, что находится внутри тегов style.
<style></style>
Мы могли бы оставить стили как есть в общем файле, но это не очень эффективно, грамотней вывести стили в отдельный файл и подключить их в файл «footer.php«. Заходим в директорию сайта, где расположен файл «index.html» или в директорию с шаблоном WordPress, где файл «footer.php» и создаем там файл с названием, например, «rbsh.css«, как у меня.
Сейчас скопированные ранее стили нам нужно поместить в наш css файл и подключить измененный «rbsh.css» файла к нашему сайту для нашего плавающего меню. Чтоб все это сделать, возвращаемся обратно к закрывающему тегу body и перед ним прописываем такую строку:
</body>
- Если для WordPress
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/rbsh.css">
Тут указан путь к директории шаблона и папке с нужным нам стилем.
- Если просто HTML сайт
<link rel="stylesheet" href="https://blogden.ru/rbsh.css">
Тут все просто: пропишите путь к вашему файлу стилей и все. Проверьте, как отображается плавающее меню на сайте.
Добавляем новые пункты меню
Если хотите внести изменения или добавлять свои пункты меню, это проще простого. Чтобы изменить цветовое оформление, заходи в наш css файл и меняем нужные значения на свои.
Если хотите добавить новые пункты меню, это легко делается. Все продемонстрировано в приведенном ниже изображении. Вы просто дублируете нужную строку и меняете параметры под новый пункт меню.
Также, чтобы задать каждому пункту свою иконку, используется специальный код, например, «f095» для телефона. Сразу скажу, что эти иконки не являются картинками, они сделаны в специальном css стиле. Ориентироваться, какому коду какая иконка соответствует, можно на данной странице.
Чтобы добавить новую иконку к новому пункту меню, например, мы решили сделать пункт меню с подарком, создаем строку с новым классом
<li class="rbsh-gift"><a href="#"><span>Призы и подарки в студию</span></a></li>
Новый класс нам нужен, чтоб мы смогли задать уникальную иконку.
Выбираете понравившуюся иконку, запоминаем её код, как правило ,это последние 4 цифры «f06b«, затем вставляем код в наш css файл «rbsh.css». У вас должно получиться, как на изображении ниже.
Подведем итоги
Теперь вы научились создавать плавающее меню на своем сайте и редактировать его под себя, менять цвета, добавлять новые пункты меню и иконки.
Жду ваших вопросов в комментариях, получилось ли у вас реализовать подобный функционал на своем проекте. Желаю всем успехов, до новых встреч и пока!
