================================================================================
ИНСТРУКЦИЯ ПО УСТАНОВКЕ ПЛАВАЮЩЕГО МЕНЮ EMBEDLAB
================================================================================
ОБЩАЯ ИНФОРМАЦИЯ
-----------------
Это универсальное плавающее меню с многоуровневыми вложениями (до 3 уровней),
адаптивным дизайном и фиксацией при прокрутке. Все классы имеют префикс
embedlab_ для избежания конфликтов со стилями любых CMS и платформ.
ФАЙЛЫ ДЛЯ СКАЧИВАНИЯ
--------------------
Скачайте следующие файлы по ссылкам:
1. floating-menu.css - файл стилей меню
Ссылка: https://embedlab.ru/scripts/menu/floating-menu.css
2. floating-menu.js - JavaScript файл с логикой меню
Ссылка: https://embedlab.ru/scripts/menu/floating-menu.js
ВАЖНО: После скачивания файлов загрузите их на ваш сервер в папки с CSS и JS.
================================================================================
ШАГ 1: СКАЧИВАНИЕ И ЗАГРУЗКА ФАЙЛОВ
================================================================================
1. Скачайте файлы меню по следующим ссылкам:
CSS файл:
https://embedlab.ru/scripts/menu/floating-menu.css
JavaScript файл:
https://embedlab.ru/scripts/menu/floating-menu.js
2. Сохраните скачанные файлы на ваш компьютер
3. Загрузите файлы floating-menu.css и floating-menu.js на ваш сервер
в папку с CSS и JS файлами (например, /css/ и /js/)
4. Убедитесь, что файлы доступны по HTTP/HTTPS
================================================================================
ШАГ 2: ПОДКЛЮЧЕНИЕ ФАЙЛОВ
================================================================================
Вставьте в вашей страницы или шаблона:
Вставьте перед закрывающим тегом :
ПРИМЕРЫ ДЛЯ РАЗНЫХ ПЛАТФОРМ:
WordPress (в functions.php или через плагин):
-----------------------------------------------
function embedlab_enqueue_menu() {
wp_enqueue_style('embedlab-menu', get_template_directory_uri() . '/css/floating-menu.css');
wp_enqueue_script('embedlab-menu', get_template_directory_uri() . '/js/floating-menu.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'embedlab_enqueue_menu');
Joomla (в шаблоне):
--------------------
Битрикс (в header.php):
-----------------------
HTML (статический сайт):
-------------------------
================================================================================
ШАГ 3: ВСТАВКА HTML КОДА МЕНЮ
================================================================================
Вставьте следующий код в нужное место вашей страницы (обычно в header):
ВАЖНО: Не изменяйте ID элементов (embedlab_floatingMenu, embedlab_menuList и т.д.)
и классы с префиксом embedlab_ - они необходимы для работы скрипта.
================================================================================
ШАГ 4: НАСТРОЙКА ПУНКТОВ МЕНЮ
================================================================================
СТРУКТУРА ПУНКТА МЕНЮ БЕЗ ПОДМЕНЮ:
-----------------------------------
================================================================================
ШАГ 5: НАСТРОЙКА ПАРАМЕТРОВ
================================================================================
DATA-АТРИБУТЫ В HTML:
---------------------
1. data-fixed="true" - меню фиксируется при прокрутке
data-fixed="false" - меню не фиксируется (просто наверху страницы)
2. data-logo="🎨" - логотип/эмодзи слева от меню
Можно использовать эмодзи или текст, например:
data-logo="🏠" или data-logo="Logo"
ПРИМЕР:
-------