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

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

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

Вашему вниманию предлагается подробное руководство о том, как добавить статичное меню на ваши целевые страницы, созданные на платформе 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 = 10; //сдвиг меню (в пикселях) от верхней границы окна
            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 на нужное значение, расстояние указывается в пикселях.

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

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

Комментарии

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

    Все ясно и понятно! спасибо, работает) starduet.ru - можно посмотреть как)

  • Avatar
    Дмитрий

    Рады, что помогли :)

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

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

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

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

  • Avatar
    Дмитрий

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

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

  • Avatar
    Людмила

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

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

    Здравствуйте, Людмила!

    Для решения проблемы необходимо проинспектировать скрипт на Вашей странице.

    Пожалуйста, пришлите ссылку на страницу в редакторе по адресу: support@lpgenerator.ru

  • Avatar
    Николай

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

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

    Здравствуйте, Николай!

    Да, конечно, Вы можете настроить для перемещения по странице кнопки статичного меню.
    Для этого воспользуйтесь инструментом "Якорь", описанным в статье по ссылке:
    https://lpgenerator.zendesk.com/hc/ru/articles/200902313--%D0%AF%D0%BA%D0%BE%D1%80%D1%8C-anchor-%D0%B4%D0%BE%D0%BB%D0%B3%D0%BE%D0%B6%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%B9-%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BC%D0%B5%D0%BD%D1%82-%D0%B2-%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80%D0%B5-LPgenerator-

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

  • Avatar
    Ибрагим Мехмедов

    Здравствуйте сделал все как описали и получилось!
    Но вот только теперь все остальные картинки и элементы на странице сайта вне блока немного блеклые, прозрачные. Как это исправить?

  • Avatar
    Борис Колосов

    Здравствуйте, Ибрагим!

    На этот вопрос Вам на e-mail ответил сотрудник технической поддержки.

  • Avatar
    Никита Лобанов

    Борис Колосов, нам тоже интересно знать как решить эту проблему)

    P.S.: Я об этом:
    //Здравствуйте сделал все как описали и получилось!
    Но вот только теперь все остальные картинки и элементы на странице сайта вне блока немного блеклые, прозрачные. Как это исправить?//

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

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

    Ваш запрос по этой задаче получен, по нему ведётся работа и в ближайшее время мы сообщим вам о результатах. Спасибо за ожидание!

  • Avatar
    Максим

    а мини сайт ,не тоже самое ?

  • Avatar
    Дмитрий

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

  • Avatar
    Андрей/Наталья

    А как сделать нестатичное меню чтобы оно плавало вместе со страницей и всегда было вверху?

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

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

    Уточните, пожалуйста, вопрос: меню, которое "плавает" вместе со страницей и всегда остаётся вверху — это и есть статичное меню.

    Если меню нестатичное - при прокрутке страницы вниз меню скроется за верхней границей экрана.

    Может быть вы сможете показать на примере, как должен выглядеть результат, который вы хотите получить?

  • Avatar
    Татьяна

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

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

    Здравствуйте, Татьяна!

    Уточните, пожалуйста, на какой странице вы проделываете эти операции? Очень сложно выявить причину, не видя текущей ситуации.

    Ссылки обычно добавляются с помощью элемента "Кнопка" - создаёте кнопку и при создании указываете нужный адрес ссылки и надпись для кнопки.

    Возможно, кнопки со ссылками выходят за пределы "несущего" блока меню - той самой подложки, которую нужно указывать в скрипте?

    Самый эффективный способ решения - попробовать ещё раз, а если не получится - то связаться со службой поддержки, например, из личного кабинета (пункт меню Поддержка), или же написать письмо на наш адрес support@lpgenerator.ru - и обязательно указать страницу, на которой выполняются действия.

  • Avatar
    Михаил Капитонов

    Добрый день, команда поддержки LP!

    Спасибо за подробную инструкцию! Все работает.
    Хочу добавить статичное меню внизу экрана. Каким должен быть скрипт, чтобы блок не зависимо от разрешения дисплея пользователя был привязан к нижней границе экрана?

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

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

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

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

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

    на такую:

    var sm_gap = jq_144(window).height()-150;
    

    тогда промежуток между верхней границей экрана и началом блока меню будет равен 150 пикселям.

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

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

  • Avatar
    Михаил Капитонов

    Спасибо, Максим!

    Все работает)

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

    Пожалуйста, Михаил, рады помочь!

  • Avatar
    Олег

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

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

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

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

  • Avatar
    Назар/Руслан

    Здравствуйте! Чтобы дизайн странички выглядел гармоничнее, мне необходимо было чтобы элементы меню располагались строго по центру. Но при добавлении данного скрипта они упорно выравнивались по левому краю. Что я только не пытался делать. Сразу оговорюсь, что java-script не изучал и сейчас сталкиваюсь с ним впервые. Но полез таки ковыряться в код скрипта (туда, где изменять не рекомендуется;-)) Чисто логически допер, что за центровку меню отвечает строка "sm_x = ($(window).width() - sm_bg_w)/2 + sm_shift;" Остаточные знания школьной математики подсказывают мне, что в строке содержится ошибка, пропущена скобка перед "/2". Добавил скобку, все заработало. Я так понимаю, что иначе данное выражение не имеет смысла. В общем, разъясните пожалуйста: это я герой, нашедший ошибку в работе профессионалов, и тогда вам бы ее исправить не помешало, либо я изначально что-то неверно сделал?

  • Avatar
    Назар/Руслан

    Update: не заработало. Просто скрипт перестал работать и поэтому все отцентровалось))) В общем, как сделать, меню было по центру?

  • Avatar
    Назар/Руслан

    Явно эта строка ("sm_x = ($(window).width() - sm_bg_w)/2 + sm_shift;") нужна все же для центровки меню. Но не работает почему-то.

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

    Здравствуйте, Назар!

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

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

    Ждём вашего сообщения и будем рады помочь!

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

    Максим, поправьте в сообщении выше строчку

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

    в ней потерялась нижняя черта, скрипт не работает. Должно быть

    var sm/нижняя черта/gap = jq/нижняя черта/144(window).height()-150;

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

    Уважаемый mznarkopremium!

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

    Самый простой способ указан в пункте 4 инструкции, последний абзац, и этого достаточно, чтобы задать отступ от верхней границы меню.

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

На базе технологии Zendesk