Вашій увазі пропонується докладний посібник про те, як додати статичне меню на ваші цільові сторінки, створені на платформі LPgenerator. Даний елемент інтерфейсу призначений для спрощення навігації на Лендінзі або мінісайте з великим об'ємом інформації. Багато маркетологи також використовують його в якості графічного елементу, що сприяє оптимізації конверсії і підвищенню привабливості своїх посадочних сторінок.
Приклад такого меню ви можете подивитися тут.
Почнемо зі створення макета статичного меню
1. За допомогою інструмента «Блок» додайте основну панель меню. У нашому прикладі даної панеллю є напівпрозорий прямокутник сірого кольору. Далі ми розмістимо на цьому блоці необхідні елементи.
У властивостях елементу справа, в розділі «Прості» ви зможете налаштувати необхідні параметри блоку: розмір, колір, кордон і т. Д. Також можна залишити блок без змін, в такому випадку він ніяк не буде відображатися на сторінці і буде служити тільки для прикріплення елементів меню.
Увага: не використовуйте властивість "на всю ширину", при ньому елементи будуть розміщуватися некоректно.
У розділі «Розширені» за допомогою CSS-стилів можна прописати додаткові властивості елемента. Наприклад, щоб зробити блок прозорим, пропишіть атрибут:
Він відповідає за видимість елемента. Значення атрибута повинно знаходитися в межах від 0 до 1.
Увага: робота з CSS-стилями вимагає підвищеної уваги. Один невірний символ може спричинити за собою порушення верстки всієї сторінки!
2. Далі на блок можна додати будь-які елементи: логотип, кнопки, посилання, текст і т. Д. Їх можна розміщувати і редагувати як завгодно, важливо, щоб елементи не виходили за межі блоку (основний панелі меню).
Тепер додамо скрипти, які роблять все елементи нашого меню статичними по відношенню до інших елементів сторінки:
3. Скопіюйте код для статичного меню, розміщений нижче (для цього наведіть курсор на код і під сплив в правому верхньому куті віконці натисніть на першу іконку):
4. Після цього натисніть на інструмент «Скрипти» і додайте скопійований код, встановивши його положення: «Перед тегом
»
Зверніть увагу: назва скрипта може бути будь-яким, але краще, щоб воно відповідало мети скрипта (наприклад, «Статичне меню»).
5. Далі необхідно замінити ідентифікатор панелі меню в скрипті.
зайдіть в розширені властивості блоку і скопіюйте ID якоря;
знайдіть в скрипті статичного меню рядок:
var sm_bg_block = «# block-new10«; // ідентифікатор основний панелі меню
замініть # block-new10 на скопійований вище ID якоря Вашого блоку.
Будьте уважні: не видаляйте подвійні лапки, усередині яких знаходиться ідентифікатор.
На цьому настройку статичного меню можна вважати завершеною.
Нюанси й тонкощі роботи
1. Панель меню (разом з усім вмістом) завжди розташовується по центру екрана незалежно від ширини екрану. Якщо змінна sm_shift не дорівнює нулю, меню зсувається по горизонталі на вказану кількість пікселів.
2. Параметр z-index елементів меню повинен бути більше, ніж в основної панелі. Розповімо про цей параметр трохи докладніше. Він визначає положення шарів елементів відносно один одного. Простими словами, один елемент може бути ближче або далі від вас.
Тут z-index шару 2 більше, ніж z-index шару 1. Для нашого меню важливо, щоб z-index основний панелі меню був менше, ніж у елементів меню (кнопок, тексту, картинок і т. Д.). В іншому випадку елемент не буде прикріплений до меню. Керувати шарами можна за допомогою інструментів «Шар вгору» і «Шар вниз».
Для більш точного позиціонування шару використовуйте настройку z-index в розширених властивостях елементу.
Для того, щоб повернути масштаб 100%, натисніть клавішу Ctrl + клавішу 0 (нуль).
4. Щоб зробити меню нижче або вище щодо верхньої межі, знайдіть в коді рядок:
var sm_gap = 10; // зрушення меню (в пікселях) від вірніше кордону вікна
Замініть 10 на потрібне значення, відстань вказується в пікселях.
Потрібна допомога? Якщо ви шукаєте готові рішення, то вам не обов'язково в усьому цьому розбиратися, наша команда буде рада допомогти:
Вітаю! А чи можна налаштувати, щоб меню з'являлося після гортання до певного місця? Дякуємо.
Технічно це можна реалізувати, проте потрібні доробки коду меню і додаткові скрипти. Ці доробки ви можете виконати самостійно, або замовити таку реалізацію додатково - так як це просунутий функціонал, що вимагає досвіду роботи зі скриптами.
Вітаю! Щоб дизайн сторінки виглядав гармонійніше, мені необхідно було щоб елементи меню розташовувалися строго по центру. Але при додаванні даного скрипта вони вперто вирівнювалися по лівому краю. Що я тільки не намагався робити. Відразу обмовлюся, що java-script не вивчав і зараз стикаюся з ним вперше. Але поліз таки колупатися в код скрипта (туди, де змінювати не рекомендується ;-)) Чисто логічно допер, що за центрування меню відповідає рядок "sm_x = ($ (window) .width () - sm_bg_w) / 2 + sm_shift;" Залишкові знання шкільної математики підказують мені, що в рядку міститься помилка, пропущена дужка перед "/ 2". Додав дужку, все запрацювало. Я так розумію, що інакше цей вислів не має сенсу. Загалом, роз'ясніть будь ласка: це я герой, який знайшов помилку в роботі професіоналів, і тоді вам би її виправити не завадило, або я спочатку щось не так зробив?
Update: не запрацювало. Просто скрипт перестав працювати і тому все відцентрувати))) В загальному, як зробити, меню було по центру?
Явно цей рядок ( "sm_x = ($ (window) .width () - sm_bg_w) / 2 + sm_shift;") потрібна все ж для центрування меню. Але не працює чомусь.
Зі свого боку ми проведемо перевірку і пошук рішення, яке і надамо вам - як ви розумієте, дуже складно надати точне рішення, не бачачи ситуацію в цілому. Наприклад, на роботу скрипта можуть впливати інші параметри сторінки, а також сторонні скрипти, причому цей зв'язок може бути неочевидній.
Чекаємо Вашого повідомлення і будемо раді допомогти!
Максим, поправте в повідомленні вище рядок
var smgap = jq144 (window) .height () - 150;
в ній загубилася нижня межа, скрипт не працює. Повинно бути
var sm / нижня межа / gap = jq / нижня межа / 144 (window) .height () - 150;
Не цілком ясно, про яке повідомленні йде мова? Перед вашим повідомленням є тільки моє ж, двомісячної давності. І не могли б ви уточнити, для чого саме потрібно ставити відступ блоку з меню таким екзотичним способом?
Найпростіший спосіб зазначений в пункті 4 інструкції, останній абзац, і цього достатньо, щоб зробити відступ від верхньої межі меню.
Якщо ж ви намагаєтеся реалізувати меню, яке буде "підніматися" в верхню частину сторінки в міру прокручування Лендінзі, тоді одним рядком коду обійтися не вийде, на жаль.
