База знаний
по возможностям платформы

Статичное меню

Статическое меню на целевых страницах

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

Пример такого меню вы можете посмотреть здесь.

Начнем с создания макета статичного меню

1. С помощью инструмента «Блок» добавьте основную панель меню. В нашем примере данной панелью является полупрозрачный прямоугольник серого цвета. Далее мы разместим на этом блоке необходимые элементы.

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

Внимание:
не используйте свойство "на всю ширину", при нём элементы будут размещаться некорректно.

свойства элемента

В разделе «Расширенные» с помощью CSS-стилей можно прописать дополнительные свойства элемента. Например, чтобы сделать блок прозрачным, пропишите атрибут:

opacity:0.5;

Он отвечает за видимость элемента. Значение атрибута должно находиться в пределе от 0 до 1.

Значение атрибута

Внимание: работа с CSS-стилями требует повышенного внимания. Один неверный символ может повлечь за собой нарушение верстки всей страницы!

2. Далее на блок можно добавить любые элементы: логотип, кнопки, ссылки, текст и т. д. Их можно размещать и редактировать как угодно, важно, чтобы элементы не выходили за границы блока (основной панели меню).

элементы

Теперь добавим скрипты, которые делают все элементы нашего меню статичными по отношению к другим элементам страницы:

3. Скопируйте код для статичного меню, размещенный ниже (для этого наведите курсор на код и во всплывшем в правом верхнем углу окошке нажмите на первую иконку):

<script>
    jq_144(function($) {
        $(document).ready(function() {
     
     
            var sm_bg_block = "#block-new10"; //идентификатор основной панели меню
            var sm_gap = 0; //сдвиг меню (в пикселях) от верхней границы окна
            var sm_shift = 0; //сдвиг меню (в пикселях) по горизонтали относительно центра экрана
           
           
           
    /* Для корректной работы menu дальнейший код изменять не рекомендуется    */
           
            var sm_menu = "";
            var sm_x_crd = [];
            var sm_y_crd = [];
            var sm_bg_top, sm_bg_left, sm_bg_bot, sm_bg_right, sm_bg_zi;
            var sm_i = 0;
            var sm_x = 0;
            var sm_y = 0;
            var sm_bg_w = 0;
           
            sm_bg_zi = parseInt($(sm_bg_block).css("z-Index"));
            sm_bg_top = parseInt($(sm_bg_block).css('top'));
            sm_bg_left = parseInt($(sm_bg_block).css('left'));
            sm_bg_right = sm_bg_left + $(sm_bg_block).width();
            sm_bg_bottom = sm_bg_top + $(sm_bg_block).height();
     
            $('div').each(function()
            {
                    if (
                    (sm_bg_zi<parseInt($(this).css("z-Index"))) &&
                    (sm_bg_top<parseInt($(this).css('top'))) &&
                    (sm_bg_left<parseInt($(this).css('left'))) &&
                    (sm_bg_right>(parseInt($(this).css('left'))+$(this).width()) &&
                    (sm_bg_bottom>(parseInt($(this).css('top'))+$(this).height())))
                    )      
                    {
                            sm_menu += ("#"+$(this).attr('id')+", ");
                    }
            });
     
            sm_menu = sm_menu.substring(0, sm_menu.length-2);
     
            $(sm_bg_block).css('position','fixed');
            $(sm_bg_block).css('z-index',parseInt($(sm_bg_block).css('z-index'))+500);
            $('body').append($(sm_bg_block));
            $(sm_menu).each(function()
            {
                    $(this).css('position','fixed');
                    $(this).css('z-index',parseInt($(this).css('z-index'))+500);                    
                    $('body').append($(this));
            });                  
       
            sm_bg_top = $(sm_bg_block).position().top;                
            sm_bg_left = $(sm_bg_block).position().left;                
                       
            $(sm_menu).each(function()
            {
                    sm_x_crd[sm_i] = $(this).position().left - sm_bg_left;
                    sm_y_crd[sm_i] = $(this).position().top - sm_bg_top;
                    sm_i++;    
            });
           
            sm_bg_w = $(sm_bg_block).width();
            sm_y = sm_gap;
            sm_i = 0;
     
            $(sm_menu).each(function()
            {
                    $(this).css('top', sm_y + sm_y_crd[sm_i]);
                    sm_i++;
            });
            $(sm_bg_block).css('top',sm_y);
     
            $(window).resize(function()
            {
                    sm_i = 0;
                    sm_x = ($(window).width() - sm_bg_w)/2 + sm_shift;                
                    $(sm_bg_block).css('left',sm_x);      
                    $(sm_menu).each(function()
                    {
                            $(this).css('left', sm_x + sm_x_crd[sm_i]);
                            sm_i++;
                    });
                   
            });              
            $(window).resize();
           
            });
    });
     
    </script>

4. После этого нажмите на инструмент «Скрипты» и добавьте скопированный код, установив его положение: «Перед тегом </BODY>»

Обратите внимание: название скрипта может быть любым, но лучше, чтобы оно соответствовало цели скрипта (например, «Статичное меню»).

Скрипты

5. Далее необходимо заменить идентификатор панели меню в скрипте.

Для этого:

  • зайдите в расширенные свойства блока и скопируйте ID якоря;

якорь

  • найдите в скрипте статичного меню строку:

var sm_bg_block = «#block-new10«; //идентификатор основной панели меню

скрипт

  • замените #block-new10 на скопированный выше ID якоря Вашего блока.

Будьте внимательны: не удаляйте двойные кавычки, внутри которых находится идентификатор.

На этом настройку статичного меню можно считать завершенной.

Нюансы и тонкости работы

1. Панель меню (вместе со всем содержимым) всегда располагается по центру экрана независимо от ширины экрана. Если переменная sm_shift не равна нулю, меню сдвигается по горизонтали на указанное количество пикселей.

2. Параметр z-index элементов меню должен быть больше, чем у основной панели. Расскажем об этом параметре немного подробнее. Он определяет положение слоев элементов относительно друг друга. Простыми словами, один элемент может быть ближе или дальше от вас.

Пример:

z-index

Здесь z-index слоя 2 больше, чем z-index слоя 1. Для нашего меню важно, чтобы z-index основной панели меню был меньше, чем у элементов меню (кнопок, текста, картинок и т. д.). В противном случае элемент не будет прикреплен к меню. Управлять слоями можно с помощью инструментов «Слой вверх» и «Слой вниз».

Для более точного позиционирования слоя используйте настройку z-index в расширенных свойствах элемента.

z-index z-index

3. Иногда необходимо, чтобы панель меню была во всю ширину экрана. Тогда просто задайте ширину панели, равной 2000 пикселей.

ширину панели

В этом случае для того, чтобы разместить элементы меню в центре панели, рекомендуем уменьшить масштаб страницы, пользуясь комбинациями «клавиша Ctrl + клавиша „минус“» или «клавиша Ctrl + колесико мыши вниз». Получив полное отображение панели, переместите блок и элементы меню так, чтобы элементы находились по центру панели.

 масштаб

Для того, чтобы вернуть масштаб 100%, нажмите клавишу Ctrl + клавишу 0 (ноль).

4. Чтобы сделать меню ниже или выше относительно верхней границы, найдите в коде строку:

var sm_gap = 10; //сдвиг меню (в пикселях) от верней границы окна

Замените 10 на нужное значение, расстояние указывается в пикселях.

Нужна помощь? Если вы ищете готовые решения, то вам не обязательно во всем этом разбираться, наша команда будет рада помочь:

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 8 из 9
Еще есть вопросы? Отправить запрос

Комментарии

  • Avatar
    Пользователь mznarkopremium

    Максим, в сообщении 4месячной давности на сегодняшний день Вы пишете, как прикрепить меню снизу. И в нем пропадает два раза нижний прочерк, в результате скрипт не работает, если прочерк не вписать вручную. Поскольку нижний прочерк пропадает при постинге ответа, я его заменил словами /нижняя черта/

    Вот об этом сообщении идет речь

    Здравствуйте, Михаил!

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

    К примеру, если изменить строку 07 нашего скрипта с такой:

    var sm_gap = 10; //сдвиг меню (в пикселях) от верней границы окна

    на такую:

    var smgap = jq144(window).height()-150;

  • Avatar
    Максим Гуйван

    Спасибо за уточнение, исправили код в сообщении, на которое вы указали - наверняка это поможет многим пользователям.

    Приятного вам дня и высоких конверсий!

  • Avatar
    Юра

    Здравствуйте! Подскажите, пожалуйста, можно ли разместить статическое меню по левой стороне? Если да, куда необходимо внести правки в скрипт?

  • Avatar
    Максим Гуйван

    Здравствуйте, Юрий!

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

    Правки вносятся в 8 строку скрипта, а именно:

    var sm_shift = -400; //сдвиг меню (в пикселях) по горизонтали относительно центра экрана
    

    В этом случае блок "меню" будет сдвинут влево от центра страницы на 400 пикселей. Путём подбора можно выявить оптимальное расположение, однако учитывайте, что для разных мониторов расположение "меню" будет разным, так как различается ширина экрана.

    Пример можно увидеть на странице по ссылке: http://robo.zxczxczxc1234567.ru/new_features/ -

  • Avatar
    Сергей

    Здравствуйте! Скажите пожалуйста, вот мой товарищ сделал одностраничник, а я сомневаюсь, что он использовал LPгенератор. Я вижу статическое меню это раз, вижу, что элементы меню активные и перекидывают на конкретное место сайта это два. Но присутствует еще общий фон под статическим меню, поверх которого "плывет" контент. Ваша платформа позволяет такое сделать? Если да, то скажите как? Вот сайт товарища: http://hublot.bestprice4.me/hublot/
    С уважением, Сергей

  • Avatar
    Константин Руденок

    Здравствуйте, Сергей!

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

    Статичное меню можно реализовать при помощи данного руководства.

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

    <style>
    body
    {
    background: url(http://ссылка на изображение) no-repeat;
    background-attachment:fixed;
    background-size: 100%;
    }
    </style>
    

    Положением скрипта нужно указать Внутри тега Head.

    Плавный скролл для кнопок статичного меню можно настроить, воспользовавшись руководством - https://lpgenerator.zendesk.com/hc/ru/articles/202642206-%D0%9F%D0%BB%D0%B0%D0%B2%D0%BD%D0%B0%D1%8F-%D0%BF%D1%80%D0%BE%D0%BA%D1%80%D1%83%D1%82%D0%BA%D0%B0-%D0%BF%D0%BB%D0%B0%D0%B2%D0%BD%D1%8B%D0%B9-%D1%81%D0%BA%D1%80%D0%BE%D0%BB%D0%BB-%D1%86%D0%B5%D0%BB%D0%B5%D0%B2%D0%BE%D0%B9-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B-

    Если у Вас появятся какие-либо конкретные вопросы по поводу реализации, то служба технической поддержки Lpgenerator будет рада ответить на них по почте (в этом случае вышлите Ваш вопрос на support@lpgenerator.ru) или по скайпу (ник - lpgenerator, работает с 11.00 до 19.00 по МСК).

  • Avatar
    Илья Горбатов

    Добрый день!
    Сделал статичное меню, возникла проблема. Когда блок по ширине 960 то все что в блоке, находиться на своем месте, но когда в блоке ставлю "на всю ширину", то при просмотре все съезжаем в левую сторону. Как быть?

  • Avatar
    Максим Гуйван

    Здравствуйте, Илья!

    В пункте 3 примечаний к инструкции есть решение вашего вопроса: если вам нужен блок для меню во всю ширину страницы - задаёте этому блоку ширину в 2000 пикселей, выровняйте этот блок с помощью кнопки "По центру", и далее разместите кнопки внутри блока меню.

    Используя опцию "во всю ширину" вы нарушаете привязку кнопок к координатам внутри блока-подложки, поэтому и происходит смещение, поэтому для меню опция "во всю ширину" не подходит.

  • Avatar
    Илья Горбатов

    Спасибо!

  • Avatar
    Иван Пчелов

    Здравствуйте.

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

  • Avatar
    Максим Гуйван

    Здравствуйте, Иван!

    Да, это возможно - для такой реализации понадобятся навыки работы со скриптами JavaScript. Также можно оставить заявку на реализацию в нашем отделе вёрстки, для этого напишите на support@lpgenerator.ru.

  • Avatar
    Иван Пчелов

    Спасибо за ответ!

  • Avatar
    Сергей

    Здравствуйте! Почему-то в разделе "Плавная прокрутка (плавный скрол) целевой страницы" никто не отвечает! А вопрос касается статичного меню!!!
    С уважением, Сергей

  • Avatar
    Максим Гуйван

    Здравствуйте, Сергей!

    Для решения проблем, связанных с той или иной реализацией на конкретной странице - лучше всего сразу связываться со службой поддержки любым удобным способом: по почте, из личного кабинета в разделе "Поддержка" или по Skype.

    В некоторых случаях, конечно, можно догадаться, в чём проблема, но в вашем случае - нужно видеть страницу и её редактор, чтобы определить причину и решение.

  • Avatar
    Альберт Хужин

    Доброго времени суток. Сделал статичное меню открываю ленд на компе все нормально работает, открываешь на планшете (iPad ) при скроле меню остается сверху в чем может быть причина ?

  • Avatar
    Алена Балакина

    Здравствуйте, Альберт!

    Причина в том, что браузер Safari не всегда корректно работает с фиксированными элементами. Чем их больше, тем более вероятны сбои, особенно на мобильных устройствах.

    Попробуйте альтернативный код статичного меню отсюда: http://pastebin.com/nrJAY7Ja

    Принцип работы с ним тот же - создаете блок и заполняете его элементами для меню. Единственное отличие - внутри одинарных кавычек Вам нужно прописать идентификаторы всех составляющих меню элементов. Скриншот-подсказка: http://prntscr.com/5y0yd6

    Скрипт добавляется перед тегом </body>: http://prntscr.com/5y10bk

    Если возникнут сложности или вопросы, напишите по адресу support@lpgenerator.ru

  • Avatar
    Сергей

    Здравствуйте! Скажите, почему статичное меню в мобильной версии закреплено и не двигается вправо/влево вместе с остальными элементами?

  • Avatar
    Максим Гуйван

    Здравствуйте, Сергей!

    Мобильные браузеры имеют свои особенности обработки скриптов, поэтому многие решения могут не работать на мобильных страницах, или требовать доработки.

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

    Если вы всё же хотите использовать меню на мобильной странице - напишите нам на адрес support@lpgenerator.ru, укажите адрес страницы и сообщите подробности о браузере и устройстве, на которой вы тестируете страницу.

  • Avatar
    Алина

    Как сделать выпадающий пункт меню?

  • Avatar
    Максим Гуйван

    Здравствуйте, Алина!

    Реализовать "выпадающее" меню можно с помощью доработки скрипта. Однако, мы бы не рекомендовали перегружать лендинг сложной навигацией, а выпадающие меню - это именно усложнение пользовательского опыта, по сравнению с изначально доступным меню.

    Если вы всё же настоятельно хотите подобное меню - пишите нам на support@lpgenerator.ru и мы попробуем подобрать варианты решения для этой задачи.

  • Avatar
    Леонид Подольский

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

  • Avatar
    Максим Гуйван

    Здравствуйте, Леонид!

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

    Например, если в отмеченное на скриншоте поле ввести -1 - получится описанная вами проблема.
    Скриншот: http://joxi.ru/Q2Kn4ZaFM1g0mj

    Если проблема всё же не решится - свяжитесь со службой поддержки, например, по почте support@lpgenerator.ru - обязательно поможем!

  • Avatar
    Павел Черемисин

    Классное меню на starduet.ru. Кодом такого меню поделитесь?

  • Avatar
    Максим Гуйван

    Здравствуйте, Павел!

    К сожалению, не сможем поделиться таким меню - на странице по ссылке - сайт на системе Wordpress, и меню реализовано совсем не тем методом, который можно использовать в редакторе страниц. Если подобное меню необходимо - что-то похожее могут разработать для вас специалисты нашего отдела вёрстки - под заказ. Обсудить детали можно в переписке через support@lpgenerator.ru

  • Avatar
    Виктория

    подскажите, у меня все шифты выравнивания по центру 0, но при открытии все равно кнопки съезжают влево(( Z индекс проверила, расположение кнопок внутри блока тоже.. что делать?

  • Avatar
    Алена Балакина

    Здравствуйте, Виктория!

    Если речь идет о кнопках, находящихся внутри блока меню, то сам блок нужно разместить по центру страницы, как описано в руководстве: http://prntscr.com/ajsbrn

    Если не получится, напишите нам по адресу support@lpgenerator.ru
    В обращении укажите, пожалуйста, адрес страницы и добавьте скриншот проблемы.

    Будем рады помочь!

  • Avatar
    Алексей

    Для элементарного действия могли бы и по проще что-то придумать... Хотя, я уже ни чему не удивляюсь...