Конструкция шапки

Выбрать "вариант шапки" и его содержимое можно в настройках темы в разделе "шапка сайта".

Внешний вид

Каждый вариант шапки формируется из файлов темы header.1.html, header.2.html ... header.7.html, которые подставляются в коде файла header.html в соответствии с выбранным в настройках темы ( вразделе "шапка сайта") вариантом.

Каждый файл имеет содержимое типа

{* VARIABLES *}
{$wm['all']['logo'] = $wm['all']['logo']|replace:'uk-logo-image':'uk-logo-image uk-logo-img-max-height-medium uk-logo-img-max-width-medium'}
{$wm[$place]['categories_nav_more'] = $wm[$place]['categories_nav_more']|replace:'uk-bar-nav':'uk-bar-nav uk-flex-right'}
{$wm['all']['search'] = $wm['all']['search']|replace:'uk-bar-item uk-width-1-1':'uk-bar-item uk-width-medium'}

{* HTML *}
{* mobile *}
<div class="uk-hidden@m"> 
<div class="uk-bar-container uk-bar-muted uk-bar-small uk-box-shadow-small" data-uk-sticky>
{$cells = [
'menu_toggle + search_toggle + contacts_toggle', 
'logo_short' => 'uk-flex-center uk-width-expand', 
'account_toggle + cart_toggle' 
]} 
{include file="./bar.html" inline} 
</div> 
</div>

...

{* desktop *}
<div class="uk-visible@m" data-uk-menu="align: top">
<div class="uk-bar-container uk-bar-muted uk-bar-medium uk-header-sticky" data-uk-sticky="animation: uk-animation-slide-top; cls-active: uk-active uk-box-shadow-small"> 
<div class="uk-container{if !empty($theme_settings.container)} uk-container-{$theme_settings.container}{/if}"> 
{$cells = [ 
'categories_nav_short', 'search' => 'uk-width-expand', 
'phone1 + cart_toggle' 
]} 
{include file="./bar.html" inline} 
</div> 
</div> 
</div>

Содержимое разбито на 2 раздела:

Первый раздел - переменные, размещается под комментарием
{* VARIABLES *}
В ней находится созданные или измененные элементы шапки. Они могут быть полезны при создании собственного элемента шапки, либо изменения уже существующего.

Второй раздел - HTML код, размещается под комментарием
{* HTML *}
Под этим комментарием размещается конструкции вывода "панелей" шапки, в том числе, "панель мобильной версии", "плавающая панель" и "панели десктопной версии".

Мобильная / десктопная версия

HTML код содержит 2 корневых элемента

{* HTML *}
{* mobile *}
<div class="uk-hidden@m"> 
<div class="uk-bar-container uk-bar-muted uk-bar-small uk-box-shadow-small" data-uk-sticky>
{$cells = [
'menu_toggle + search_toggle + contacts_toggle', 
'logo_short' => 'uk-flex-center uk-width-expand', 
'account_toggle + cart_toggle' 
]} 
{include file="./bar.html" inline} 
</div> 
</div>

...

{* desktop *}
<div class="uk-visible@m" data-uk-menu="align: top">
<div class="uk-bar-container uk-bar-muted uk-bar-medium uk-header-sticky" data-uk-sticky="animation: uk-animation-slide-top; cls-active: uk-active uk-box-shadow-small"> 
<div class="uk-container{if !empty($theme_settings.container)} uk-container-{$theme_settings.container}{/if}"> 
{$cells = [ 
'categories_nav_short', 'search' => 'uk-width-expand', 
'phone1 + cart_toggle' 
]} 
{include file="./bar.html" inline} 
</div> 
</div> 
</div>
{* mobile *}
<div class="uk-hidden@m"> 
...
</div> 

Элемент div с классом uk-hidden@m. Он и его содержимое отображается на сайте, при ширине экрана до 960px (ширина экрана мобильных устройств).

{* desktop *}
<div class="uk-visible@m" data-uk-menu="align: top">
...
</div> 

Элемент div с классом uk-visible@m. Отображается на сайте, при ширине экрана от 959px (ширина экрана десктопных устройств).

Панель шапки

В каждом корневом элементе HTML кода, содержатся панели - это конструкции типа:

<div class="uk-bar-container uk-bar-overlay-light uk-padding-xsmall uk-padding-remove-horizontal"> 
<div class="uk-container{if !empty($theme_settings.container)} uk-container-{$theme_settings.container}{/if}">
{$cells = [ 
'logo', 
'search' => 'uk-flex-center uk-width-expand', 
'phone1, divider_small, phone2' 
]} 
{include file="./bar.html" inline} 
</div> 
</div>

Каждая из панелей состоит из:

Массив элементов

{$cells = [ 
'logo', 
'search' => 'uk-flex-center uk-width-expand', 
'phone1, divider_small, phone2' 
]}

Переменная $cells является массивом, в котором содержатся:
- ячейка панели,
- элементы,
- модификаторы,
- классы, меняющие свойства и последовательность элементов.

Подробнее о "массиве элементов".

Шаблон панели

{include file="./bar.html" inline}

Получает данные массива элементов и преобразует в html код.

* Ни эту строку, ни код файла bar.html изменять не рекомендуется.

Контейнер панели

И "массив элементов" и "шаблон панели" размещаются в контейнерах:

<div class="uk-bar-container uk-bar-overlay-light uk-padding-xsmall uk-padding-remove-horizontal"> 
<div class="uk-container{if !empty($theme_settings.container)} uk-container-{$theme_settings.container}{/if}">
...
</div> 
</div>

Классы этих контейнеров задают свойства (ширина панели, цветовая схема, отступы) всей панели.

Подробнее о свойствах "контейнерах панели".

Плавающая панель

Код "плавающей панели" имеет вид:

<div class="uk-bar-container uk-bar-muted uk-bar-medium uk-header-sticky" data-uk-sticky="animation: uk-animation-slide-top; cls-active: uk-active uk-box-shadow-small"> 
<div class="uk-container{if !empty($theme_settings.container)} uk-container-{$theme_settings.container}{/if}"> 
{$cells = [ 
'categories_nav_short', 
'search' => 'uk-width-expand', 
'phone1 + cart_toggle' 
]}
{include file="./bar.html" inline} 
</div> 
</div>

Размещается она в самом низу блока "десктопной версии".
Отличается от других панелей только атрибутом "data-uk-sticky" содержащим параметры "animation: uk-animation-slide-top; cls-active: uk-active uk-box-shadow-small"

* можно изменить параметры плавающей панели - описание параметров

Есть вопросы или предложение?

Для того что бы задать вопрос, Вам необходимо авторизоваться или зарегистрироваться