Блок "Меню"

1. Принцип работы

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

 

Блок «Меню» является сквозным — добавленный на любую страницу, он автоматически отображается на всех страницах сайта.

 

Блок выводит пункты меню, которые можно редактировать в административной панели.

 

 

1.1. Особенности работы:

• Блок закреплён в шапке сайта и остаётся на месте при прокрутке страницы.
• Гиперссылки для быстрого набора номера формируются автоматически. Достаточно указать номер в любом удобном формате.
• Иконки соцсетей, телефона и других элементов формируются автоматически.
• Поле поиска поддерживает голосовой ввод текста.
• Корзина поддерживает анимацию: при клике на «Купить» товар плавно уменьшается и улетает в корзину.

1.2. Дополнительные области

Помимо пунктов меню, блок содержит управляемые области:

• слева:

  • логотип,

  • редактируемый блок;

• справа:

  • телефон 1,

  • телефон 2,

  • соцсети,

  • редактируемый блок;

• справа, с краю::

  • поиск,

  • корзина,

  • пользователи.

1.3. Адаптивное поведение:

• При уменьшении разрешения (планшеты, телефоны, сворачивание окна) меню адаптирует содержимое, последовательно подстраивая элементы под доступную ширину экрана:
  • уменьшает отступы;
  • на мобильных устройствах и при малом разрешении номера телефонов сворачиваются, остаются только иконки телефонов и соцсетей;
  • текстовая область справа (обычно для email) скрывается;
  • меню сворачивается в гамбургер-меню;
  • корзина сворачивается в значок;
  • текст слева (названии компании исчезает), остаётся только логотип
  • логотип уменьшается в размерах;
• Для телефонов меню отображается в компактной версии.

 

 

 

1.4. Поведение на мобильных устройствах:

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

 

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

 

2. Установка и внешний вид

Кнопка установки блока:

 

 

Меню устанавливается в верхнюю часть сайта. При наведении курсора - появляется панель с кнопками действий.

 

 

---

 

3. Управление блоком

Добавить пункт меню

Нажатие на кнопку открывает окно добавления нового пункта меню.

 

 

Более широкие возможности для добавления и редактирования доступны в административной панели.

 

 

Редактируемые области

Нажатие на кнопку открывает окно управления редактируемыми областями

 

 

• Логотип слева
  При нажатии открывается окно загрузки логотипа.
  
  
  
  Большие изображения автоматически уменьшаются. Чтобы сохранить исходный размер и прозрачность, высота логотипа не должна превышать 120 px, ширина — 200 px. Если логотип не обновился, сбросьте кэш страницы сочетанием Ctrl+Shift+R или Ctrl+F5.
   
• Редактируемый блок - слева
  При нажатии на кнопку открывается визуальный редактор для редактирования текста слева (обычно здесь размещают название компании). Клик вне блока закрывает редактор и сохраняет данные
  
  
  \
• Телефон 1 справа
  При нажатии открывается окно редактирования телефона:
  
  
   
  • Опубликовать — включать или отключать отображение телефона в блоке меню.
  • Номер телефона указывается в любом формате. Гиперссылка для быстрого набора и иконка телефона формируются автоматически.
  • Цвет шрифта телефона;
  • WhatsApp — отображать значок WhatsApp рядом с телефоном. Ссылка для быстрого перехода формируется автоматически.
  • Viber — отображать значок Viber рядом с телефоном. Ссылка для быстрого перехода формируется автоматически.
     
• Телефон 2 справа
  Аналогично для второго телефона.
   
• Соцсети справа
  Вывод значков соцсетей. В текстовом поле укажите ссылки, значки сформируются автоматически.
  
  
   
• Редактируемый блок - справа
  При нажатии на кнопку открывается визуальный редактор для редактирования текста справа (обычно здесь размещают email, время работы и др.). Клик вне блока закрывает редактор и сохраняет данные
  
  
   
• Поиск
  Включает или отключает отображение значка поиска в меню.
  
  
   
• Корзина
  Включает или отключает отображение значка поиска в меню.
  
  
   
• Пользователи
  Включает или отключает значёк входа в личный кабинет пользователя
  
  
   

Настройки

Нажатие на кнопку открывает окно настроек блока

 

• Фон:

  • нет;
  • цвет из настроек сайта 1;
  • цвет из настроек сайта 2;
  • цвет из настроек сайта 3;
  • свой цвет;
  • градиент;
  • изображение;

• Размер, положение, шаблон:

  • максимальная ширина;

  • отступ в пикселях;

  • Прилипающее меню
    (только на мобильной версии); 

  • шаблон:
    • стандартный;
    • индивидуальный;

• Шрифт:

  • размер шрифта в пикселях, цвет шрифта - выбор из палитры;

  • цвет активного меню:

    • установленный вручную;

    • предустановленные варианты палитрый сайта;

Удалить блок