Исправленное меню навигации для 4`й ветки Okay CMS.

Правила раздела: faq.php?mode=okay
Модератор: Модераторы

Dysha-Kuzbass M
Аватара
Dysha-Kuzbass M
Возраст: 34
Репутация: 0
Сообщения: 115
Зарегистрирован: 17.05.2017
С нами: 3 года 11 месяцев
Откуда: Кузбасс
ВКонтакте

Сообщение #1 Dysha-Kuzbass » 25.04.2021, 01:00

Всем хола!
Посидел сегодня ночку, чуть помучался с основным меню навигации для шаблона 4`ой ветки Okay CMS! Но вроде ничего, получилось!

В общем, начнёмсъ!

За основу был взят код от пользователя Elanlar.

Код выводит картинки во втором меню навигации. Т.е., у меня получилось (Первое меню с картинкой - > Второе меню с картинкой - > Третье меню с картинкой).

1. Заходим в site.ru/design/your_template/html/ и открываем файл desktop_categories.tpl.
Меняем свой код на этот: (предварительно сделать backUP исходного файла)
Спойлер
{function name=categories_tree3}
{if $categories}
<div class="level_{$level} {if $level == 1}categories_nav__menu{else}categories_nav__subcategory{/if}">
<ul class="fn_category_scroll {if $level == 1}categories_menu {else}subcategory {/if}">
{foreach $categories as $c}
{if $c->visible && ($c->has_products || $settings->show_empty_categories)}
{if $c->subcategories && $c->count_children_visible && $level < 3}
<li class="categories_menu__item has_child">
<a class="d-flex align-items-center categories_menu__link{if $category->id == $c->id} selected{/if}" href="{url_generator route="category" url=$c->url}" data-category="{$c->id}">
{if $c->image}
<span class="categories_menu__icon lazy" data-bg="url({$c->image|resize:22:22:false:$config->resized_categories_dir})" ></span>
{/if}
<span class="categories_menu__name">{$c->name|escape}</span>
{include file='svg.tpl' svgId='arrow_right'}
</a>
{categories_tree3 categories=$c->subcategories level=$level + 1}
</li>
{else}
<li class="categories_menu__item">
<a class="categories_menu__link d-flex align-items-center d-flex align-items-center{if $category->id == $c->id} selected{/if}" href="{url_generator route='category' url=$c->url}" data-category="{$c->id}">
{if $level == 3}
<div class="d-flex align-items-center justify-content-center categories_menu__image">
{if $c->image}
<img class="lazy" data-src="{$c->image|resize:22:22:false:$config->resized_categories_dir}" alt="{$c->name|escape}" srcset="{$c->image|resize:22:22:false:$config->resized_categories_dir:null:null:true}"/>
{else}
<div class="categories__no_image d-flex align-items-center " title="{$c->name|escape}">
{include file="svg.tpl" svgId="no_image"}
</div>
{/if}
</div>
{else}
{if $c->image}
<span class="categories_menu__icon lazy" data-bg="url({$c->image|resize:22:22:false:$config->resized_categories_dir})"></span>
{/if}
{/if}
<span class="d-flex align-items-center categories_menu__name">{$c->name|escape}</span>
</a>
</li>
{/if}
{/if}
{/foreach}
</ul>
</div>
{/if}
{/function}
{categories_tree3 categories=$categories level=1}

2. Идем так же site.ru/design/your_template/css/ и открываем файл theme.css. Находим код: /****** #Header catalog **************/ и меняем его вплоть до начала кода #Main banner на этот: (предварительно сделать backUP исходного файла)
Спойлер
/****** #Header catalog ************************************************************/

.header__bottom_panel{position: relative;}

.catalog_button {
-webkit-box-flex: 0;
-webkit-flex: 1 0 285px;
-ms-flex: 1 0 285px;
flex: 1 0 285px;
max-width: 285px;
position: relative;
margin: 10px 0 10px;
border-radius: 4px;
}
.catalog_button__heading {
position: relative;
cursor: pointer;
font-size: 16px;
font-weight: 500;
padding: 0 0 0 15px;
width: 100%;
background: var(--okay-basic-company);
color: var(--okay-basic-company-text);
border-radius: 4px;
height: 40px;
}
.main_page .catalog_button__heading{pointer-events: none;}
.catalog_button .catalog_icon {margin-right: 10px;}
.catalog_button .catalog_icon:before {font-size: 20px;}
.catalog_button .catalog_button__arrow {
position: absolute;
right: 15px;
height: calc(50% - 7px);
}
.catalog_button .arrow_right {
height: 14px;
width: 14px;
display: block;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.catalog_button.active .arrow_right {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.categories_nav{height: 400px!important;}

.categories_nav{
background: #fff;
display: none;
position: absolute;
top: 100%;
left: 0;
transition: .3s;
width: 285px;
z-index: 1;
}
.categories_nav--show.categories_nav{
display: block;
height: 400px;
}
.categories_nav .categories_nav__menu{
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
max-width: 100%;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.categories_nav .categories_nav__menu .categories_menu__item{margin: 0;}

.categories_nav .categories_nav__subcategory {
position: absolute;
top: 0;
/*height: 100%;*/
z-index: -4;
visibility: hidden;
opacity: 0;
width: 285px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-webkit-transform: translateX(260px) translateZ(0px);
transform: translateX(260px) translateZ(0px);
-webkit-transition: -webkit-all .5s ease-in-out;
transition: -webkit-all .5s ease-in-out;
transition: all .5s ease-in-out;
transition-delay: 0s, 0s;
-webkit-transition-delay: .15s;
}
.categories_nav .categories_menu,
.categories_nav .subcategory {
height: 100%;
padding: 13px 0 10px 0;
}
.categories_menu:not(.scroll) {overflow: hidden;}

.categories_nav .level_3.categories_nav__subcategory {
max-height: 100%;
max-width: calc(100vw - 583px);
/*width: calc(1366px - 583px);*/
}
.categories_nav .categories_menu__link {
padding: 6px 20px 6px 10px;
position: relative;
transition: .3s;
text-decoration: none;
color: var(--okay-body-text);
line-height: 1.2;
/*font-size: 13px;*/
font-weight: 500;
min-height: 34px;
}
.categories_menu__link{
color: var(--okay-body-text);
text-decoration: none;
position: relative;
}
.categories_nav .categories_menu__link .categories_menu__icon {
height: 22px;
width: 22px;
margin-right: 8px;
-webkit-box-flex: 0;
-webkit-flex: 0 0 22px;
-ms-flex: 0 0 22px;
flex: 0 0 22px;
max-width: 22px;
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
}
.categories_nav .categories_menu__link .categories_menu__icon svg {
max-height: 22px;
max-width: 22px;
}
.categories_nav .categories_menu__link .categories_menu__icon svg path{
fill: currentColor!important;
}
.categories_menu__link .categories_menu__name {
-webkit-flex-basis: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.categories_nav__subcategory:not(.level_3) .categories_menu__link .categories_menu__name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.categories_nav .categories_menu__link .arrow_right {
position: absolute;
right: 7px;
top: calc(50% - 5px);
-webkit-transform: rotate(0);
transform: rotate(0);
transition: .3s;
width: 12px;
height: 12px;
-webkit-box-flex: 0;
-webkit-flex: 0 0 15px;
-ms-flex: 0 0 15px;
flex: 0 0 15px;
max-width: 15px;
}

.categories_nav__subcategory.level_3 .categories__no_image .arrow_right {
width: 50px;
height: 50px;
display: block;
position: relative;
top: inherit;
max-width: 50px;
flex: inherit;
}

.categories_nav .subcategory{
background: #fff;
border-left: 1px solid #ebebeb;
}
.categories_nav .subcategory .categories_menu__item{
background: #fff;
position: static;
}

.categories_nav .level_3 .subcategory{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
overflow: auto;
}

.categories_nav .level_3 .subcategory .categories_menu__item{
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
background: #fff;
}

.categories_nav .subcategory .categories_menu__item{
background: #fff;
}

.categories_nav .level_3 .subcategory .categories_menu__item{
position: relative;
background: #fff;
text-align: center;
}
.categories_nav .level_3 .subcategory .categories_menu__item .categories_menu__link{
background: #fff;
}
.categories_nav .level_3 .subcategory .categories_menu__item .categories_menu__image{
height: 10px;
}
.categories_nav .level_3 .subcategory .categories_menu__item .categories_menu__image svg{
max-height: 65px;
max-width: 100%;
}
.categories_nav .level_3 .subcategory .categories_menu__item .category_name{
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
height: 100px;
}
.categories_nav ul::-webkit-scrollbar {
width: 0;
background: transparent;
}
.scroll{
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.hover_scroll {
position: absolute;
left: 0;
height: 30px;
width: 100%;
opacity: 1;
transition: all 320ms;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(240,240,240,0.7);
background-position: center center;
background-repeat: no-repeat;
background-size: 14px 14px;
margin: 0;
}
.hover_scroll.hover_scroll_up {
top: 0;
}
.hover_scroll:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 20px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f107";
position: absolute;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
border-radius: 50%;
opacity: 0.8;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
-webkit-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
color: var(--okay-basic-company-text);
background-color: var(--okay-basic-company);
}
.hover_scroll.hover_scroll_up:before {
content: "\f106";
}
.hover_scroll.hover_scroll_down {
bottom: 0;
}

3. Идём в админку! К категориям добавляем картинки и идём проверять!

У меня получилось вот так:
dropmenu.jpg


P.S. Есть чуть косяк с третьим меню, точнее, отступ текста от картинки не стал делать. Если что, то всё находится в файле theme.css. Там можно поиграться!

Ну вот и всё! Всем спасибо, всем адьёмсъ амигосъ! :)

*********************************************************************
Кстати, к администрации будет просьба!
Можете всё это подправить да и включить в следующий snapshot! Думаю, против никто не будет!

Добавлено спустя 1 час 44 минуты:
Кстати, картинку-заглушку можно вообще убрать. Это можно сделать так: site/design/you_template/html/desktop_categories.tpl и удалить оттуда кусок вот этого кода:

Код: Выделить всё

{else}
<div class="categories__no_image d-flex align-items-center " title="{$c->name|escape}">
{include file="svg.tpl" svgId="no_image"}
</div>
{/if}


Соответственно, если у категории нет картинки, то она (заглушка) и не будет "глаза мозолить"!

Dysha-Kuzbass M
Аватара
Dysha-Kuzbass M
Возраст: 34
Репутация: 0
Сообщения: 115
Зарегистрирован: 17.05.2017
С нами: 3 года 11 месяцев
Откуда: Кузбасс
ВКонтакте

Сообщение #2 Dysha-Kuzbass » 29.04.2021, 00:34

Помогло кому?

OkayCMS M
Администратор
Аватара
OkayCMS M
Администратор
Репутация: 207
Сообщения: 1464
Зарегистрирован: 12.11.2015
С нами: 5 лет 6 месяцев
Сайт Skype

Сообщение #3 OkayCMS » 03.05.2021, 12:11

Мы хотим сделать верстку для нескольких вариантов меню в дефолтном функционале, но руки никак не доходят :(
Подкрутил приоритет задаче, чтобы вернулись к ней в ближайшее время. Спасибо.


Название раздела: Полезные решения для OkayCMS
Правила раздела: faq.php?mode=okay

Быстрый ответ


Введите код в точности так, как вы его видите. Регистр символов не имеет значения.
Код подтверждения

   

Вернуться в «Полезные решения для OkayCMS»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 1 гость