Плавающее меню

Добавляем плавающее меню помощи на свой сайт

Приветствую вас, уважаемые читатели блога. На связи Денис Чернятинский. На повестке дня: решил вам рассказать об интересном инструменте плавающего меню помощи, которое можно установить на любом блоге или сайте. Такой инструмент очень удобен пользователю и сводит к минимуму его действия до получения результата.

Плавающее меню

Пример реализации такого меню вы можете видеть на моем блоге. Зайдя на мой сайт, в левой части окна браузера появляется квадратная пиктограмма, если на нее навести, появляется специальная подсказка «Нужна помощь». Нажав на нее, появятся дополнительные пункты меню, их можно изменять, удалять и добавлять, а также редактировать цвета и новые иконки. Об этом я распишу подробнее в этой статье.

Вставка кода на сайт

Начнем со вставки кода, которые вы можете скачать по приведенной ссылке. Вам нужно распаковать архив, в нем вы найдете два демо-файла. Можете посмотреть, как все работает, нажав на каждый демо-файл.

Выбираем понравившейся вариант и открываем его для редактирования. Я использую программу 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="http://m.blogden.ru/rbsh.css">

Тут все просто: пропишите путь к вашему файлу стилей и все. Проверьте, как отображается плавающее меню на сайте.

Пример плавающего меню

Добавляем новые пункты меню

Если хотите внести изменения или добавлять свои пункты меню, это проще простого. Чтобы изменить цветовое оформление, заходи в наш css файл и меняем нужные значения на свои.

Изменение цвета

Если хотите добавить новые пункты меню, это легко делается. Все продемонстрировано в приведенном ниже изображении. Вы просто дублируете нужную строку и меняете параметры под новый пункт меню.

Новый пункт меню

Также, чтобы задать каждому пункту свою иконку, используется специальный код, например, «f095» для телефона. Сразу скажу, что эти иконки не являются картинками, они сделаны в специальном css стиле. Ориентироваться, какому коду какая иконка соответствует, можно на данной странице.

Коды иконок

Чтобы добавить новую иконку к новому пункту меню, например, мы решили сделать пункт меню с подарком, создаем строку с новым классом

<li class="rbsh-gift"><a href="#"><span>Призы и подарки в студию</span></a></li>

Новый класс нам нужен, чтоб мы смогли задать уникальную иконку.

Выбираете понравившуюся иконку, запоминаем её код, как правило ,это последние 4 цифры «f06b«, затем вставляем код в наш css файл «rbsh.css». У вас должно получиться, как на изображении ниже.

CSS font gift

Подведем итоги

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

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

Немного об Авторе Денис Чернятинский

У меня есть огромная уверенность в том, что каждый человек может реализовать себя с помощью современных интернет технологий, зарабатывать на этом, развивая и внедряя свои проекты. Реализация себя в том или ином направлении не требует большого времени. Вся необходимая информация уже существует, нужно только знать, что и как использовать для конкретных задач. Я окажу вам помощь в этом!

>