Открыть главное меню
ABCP Documentation

Catalog-tile-options: различия между версиями

Статья Обсуждение
(Новая страница: «Новая страница»)
 
Строка 1: Строка 1:
−
Новая страница
+
= Дополнительные варианты отображения плиток каталогов =
 +
== Вариант 1 (Все подпункты видны сразу) ==
 +
[[Файл:cat-var-1.png]]
 +
 
 +
<pre>
 +
<div class="catalogsCont">
 +
    <ul>
 +
<li>
 +
    <a href="/carbase">
 +
<i class="fr-catalog-icon fr-catalog-icon-tecdoc"></i>Запчасти для ТО
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/auto2dV2">
 +
<i class="fr-catalog-icon fr-catalog-icon-original"></i>Оригинальные каталоги
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/accessories_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-accestories"></i>Аксессуары
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/light">
 +
<i class="fr-catalog-icon fr-catalog-icon-car-lights2"></i>Лампы
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/lamps_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-car-lights"></i>Лампы по параметрам
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/poly_v_belts_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-belts"></i>Ремни поликлиновые
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/oils_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-oil"></i>Масла
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/gear_oils_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-gear-oil"></i>Трансмиссионные масла
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/coolant_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-coolant"></i>Охлаждающие жидкости
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/brake_fluids_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-brake_fluids"></i>Тормозные жидкости
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/washer_liquids_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-washer-fluid"></i>Жидкости стеклоомывателя
 +
    </a>
 +
</li>
 +
<li class="multicontent-block multicontent-block-3">
 +
    <div class="multicontent-block__header">
 +
<i class="fr-catalog-icon fr-catalog-icon-tires_search"></i>
 +
                <a href="/wheel_calc">Подбор шин по Авто</a>
 +
    </div>
 +
    <ul class="multicontent-block__items">
 +
<li>
 +
    <a href="/tires_catalog">Шины</a>
 +
</li>
 +
<li>
 +
    <a href="/disks_catalog">Диски</a>
 +
</li>
 +
<li>
 +
    <a href="/moto_tires_catalog">Мотошины</a>
 +
</li>
 +
<li>
 +
    <a href="/truck_tires_catalog">Грузовые шины</a>
 +
</li>
 +
    </ul>
 +
</li>
 +
<li>
 +
    <a href="/batteries_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-battery"></i>Аккумуляторы
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/wipers_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-wipers"></i>Щётки стеклоочистителя
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/emergency_waistcoats_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-emergency_waistcoats"></i>Сигнальные жилеты
 +
    </a>
 +
</li>
 +
<li class="multicontent-block multicontent-block-2">
 +
    <div class="multicontent-block__header">
 +
<i class="fr-catalog-icon fr-catalog-icon-cleaning"></i>
 +
                <a href="/ext_cleaners_catalog">Уход и очистка</a>
 +
    </div>
 +
    <ul class="multicontent-block__items">
 +
<li>
 +
    <a href="/vacuum_cleaners_catalog">Бытовые пылесосы</a>
 +
</li>
 +
<li>
 +
    <a href="/pressure_washers_catalog">Мойки высокого давления</a>
 +
</li>
 +
    </ul>
 +
</li>
 +
<li>
 +
    <a href="/fuel_additives_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-fuel_additives"></i>Топливные присадки
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/cooling_system_additives_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-cooling_system_additives"></i>Присадки в систему охлаждения
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/steering_wheel_cover_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-steering-wheel-covers"></i>Оплетки на руль
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/industrial_gear_oils_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-barrel"></i>Масла индустриальные редукторные
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/scooter_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-scooter"></i>Самокаты
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/flushing_oils_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-flush_oil"></i>Масла промывочные
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/adblue_liquids_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-adblue_liquids"></i>Жидкости AdBlue
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/antiseptics_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-antiseptic"></i>Антисептики
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/lubricants_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-lubricants"></i>Смазки
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/compressors_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-compressor"></i>Компрессоры
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/sockets_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-sockets"></i>Головки торцевые
 +
    </a>
 +
</li>
 +
    </ul>
 +
    <style>
 +
.catalogsCont {
 +
    width: 100%;
 +
    margin-bottom: 40px;
 +
}
 +
 
 +
.catalogsCont > ul {
 +
    list-style: none;
 +
    padding: 0;
 +
    margin: 0;
 +
    display: grid;
 +
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 +
    grid-gap: 12px;
 +
}
 +
 
 +
.catalogsCont > ul > li {
 +
    font-size: 13px;
 +
    color: #222;
 +
    height: 50px;
 +
    border-radius: 3px;
 +
    overflow: hidden;
 +
}
 +
 
 +
.catalogsCont > ul > li > a {
 +
    line-height: 1.2;
 +
    color: #222;
 +
    text-decoration: none;
 +
    background-color: #efefef;
 +
    padding: 0 9px 0 10px;
 +
    height: 100%;
 +
    position: relative;
 +
    display: flex;
 +
    align-items: center;
 +
    justify-content: flex-start;
 +
    transition: background-color 0.25s ease;
 +
}
 +
 
 +
.catalogsCont > ul > li > a .fr-label.fr-label-success {
 +
    background-color: #3eaa05;
 +
            padding-top: .3em;
 +
    margin-left: 7px
 +
}
 +
 
 +
.catalogsCont > ul > li > a:hover {
 +
    background: #dbdbdb
 +
}
 +
 
 +
.catalogsCont ul li i {
 +
    font-size: 34px;
 +
    margin-right: 10px
 +
}
 +
 
 +
.catalogsCont .multicontent-block {
 +
    font-size: 12px;
 +
    background-color: #efefef;
 +
    height: auto;
 +
}
 +
 
 +
.catalogsCont .multicontent-block-2 {
 +
    grid-row: auto / span 2;
 +
}
 +
 
 +
.catalogsCont .multicontent-block-3 {
 +
    grid-row: auto / span 3;
 +
}
 +
 
 +
.catalogsCont .multicontent-block-4 {
 +
    grid-row: auto / span 4;
 +
}
 +
 
 +
.catalogsCont .multicontent-block-5 {
 +
    grid-row: auto / span 5;
 +
}
 +
 
 +
.catalogsCont .multicontent-block-6 {
 +
    grid-row: auto / span 6;
 +
}
 +
 
 +
.catalogsCont .multicontent-block__header {
 +
    display: flex;
 +
    align-items: center;
 +
    padding: 9px 8px 0 11px;
 +
            height: auto;
 +
        }
 +
 
 +
        .catalogsCont .multicontent-block__header a {
 +
            flex-grow: 1;
 +
        }
 +
 
 +
        .catalogsCont .multicontent-block__header a,
 +
.catalogsCont .multicontent-block__items li a {
 +
    color: #222;
 +
    padding: 5px;
 +
    border-radius: 3px;
 +
    text-decoration: none;
 +
    display: block;
 +
    transition: background-color 0.25s ease;
 +
}
 +
 
 +
.catalogsCont .multicontent-block__header a:hover,
 +
.catalogsCont .multicontent-block__items li a:hover {
 +
    background-color: #dbdbdb;
 +
}
 +
 
 +
.catalogsCont .multicontent-block__header i {
 +
    margin-right: 5px;
 +
}
 +
 
 +
.catalogsCont .multicontent-block__items {
 +
    list-style: none;
 +
    padding: 0 8px 0 50px;
 +
    margin: 0;
 +
}
 +
 
 +
.catalogsCont .multicontent-block__items li:not(:last-child){
 +
    margin-bottom: 3px;
 +
}
 +
 
 +
@media (max-width: 1199px) {
 +
    .catalogsCont > ul {
 +
        grid-template-columns: 1fr 1fr 1fr 1fr;
 +
    }
 +
 
 +
            .catalogsCont .multicontent-block {
 +
        font-size: 13px;
 +
    }
 +
}
 +
 
 +
@media (max-width: 992px) {
 +
    .catalogsCont > ul {
 +
        grid-template-columns: 1fr 1fr 1fr;
 +
    }
 +
 
 +
            .catalogsCont .multicontent-block__items li:not(:last-child) {
 +
                margin-bottom: 2px;
 +
            }
 +
}
 +
 
 +
@media (max-width: 767px) {
 +
    .catalogsCont > ul {
 +
        grid-template-columns: 1fr 1fr;
 +
    }
 +
 
 +
            .catalogsCont .multicontent-block__items li:not(:last-child) {
 +
                margin-bottom: 0;
 +
            }
 +
 
 +
    .catalogsCont > ul > li,
 +
            .catalogsCont .multicontent-block {
 +
        font-size: 14px
 +
            }
 +
}
 +
 
 +
@media (max-width: 481px) {
 +
    .catalogsCont > ul {
 +
        grid-template-columns: 1fr;
 +
    }
 +
 
 +
            .catalogsCont .multicontent-block__items {
 +
                padding-bottom: 9px;
 +
            }
 +
}
 +
    </style>
 +
</div>
 +
</pre>
 +
<br>
 +
 
 +
== Вариант 2 (Выпадающие списки) ==
 +
[[Файл:cat-var-2.png]]
 +
 
 +
<pre>
 +
<div class="catalogsCont">
 +
    <ul>
 +
<li>
 +
    <a href="/carbase">
 +
<i class="fr-catalog-icon fr-catalog-icon-tecdoc"></i>Запчасти для ТО
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/auto2dV2">
 +
<i class="fr-catalog-icon fr-catalog-icon-original"></i>Оригинальные каталоги
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/accessories_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-accestories"></i>Аксессуары
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/light">
 +
<i class="fr-catalog-icon fr-catalog-icon-car-lights2"></i>Лампы
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/lamps_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-car-lights"></i>Лампы по параметрам
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/poly_v_belts_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-belts"></i>Ремни поликлиновые
 +
    </a>
 +
</li>
 +
<li class="fr-dropdown catalogs-dropdown">
 +
    <a href="#" class="fr-dropdown-toggle" data-toggle="dropdown">
 +
<i class="fr-catalog-icon fr-catalog-icon-oil"></i>Масла и жидкости
 +
<span class="catalogs-dropdown__arrow">
 +
    <span class="fr-icon-arrow-down2"></span>
 +
</span>
 +
    </a>
 +
    <ul class="fr-dropdown-menu">
 +
<li>
 +
    <a href="/hydraulic_oil_catalog">Масла гидравлические</a>
 +
</li>
 +
<li>
 +
    <a href="/washer_liquids_catalog">Жидкости стеклоомывателя</a>
 +
</li>
 +
<li>
 +
    <a href="/industrial_gear_oils_catalog">Масла редукторные</a>
 +
</li>
 +
<li>
 +
    <a href="/oils_catalog">Моторные масла</a>
 +
</li>
 +
<li>
 +
    <a href="/oil_additives_catalog">Присадки в масла</a>
 +
</li>
 +
<li>
 +
    <a href="/cooling_system_additives_catalog">Присадки в систему охлаждения</a>
 +
</li>
 +
<li>
 +
    <a href="/flushing_oils_catalog">Масла промывочные</a>
 +
</li>
 +
<li>
 +
    <a href="/fuel_additives_catalog">Присадки в топливо</a>
 +
</li>
 +
<li>
 +
    <a href="/brake_fluids_catalog">Тормозные жидкости</a>
 +
</li>
 +
<li>
 +
    <a href="/gear_oils_catalog">Трансмиссионные масла</a>
 +
</li>
 +
<li>
 +
    <a href="/coolant_catalog">Охлаждающие жидкости</a>
 +
</li>
 +
    </ul>
 +
</li>
 +
<li>
 +
    <a href="/wheel_calc">
 +
<i class="fr-catalog-icon fr-catalog-icon-tires_search"></i>Подбор шин по Авто
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/tires_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-tire"></i>Шины
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/disks_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-disks"></i>Диски
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/moto_tires_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-moto-tyres"></i>Мотошины
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/truck_tires_catalog">
 +
        <i class="fr-catalog-icon fr-catalog-icon-truck-tire"></i>Грузовые шины
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/batteries_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-battery"></i>Аккумуляторы
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/wipers_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-wipers"></i>Щётки стеклоочистителя
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/emergency_waistcoats_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-emergency_waistcoats"></i>Сигнальные жилеты
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/ext_cleaners_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-cleaning"></i>Уход и очистка
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/steering_wheel_cover_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-steering-wheel-covers"></i>Оплетки на руль
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/scooter_catalog">
 +
    <i class="fr-catalog-icon fr-catalog-icon-scooter"></i>Самокаты
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/adblue_liquids_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-adblue_liquids"></i>Жидкости AdBlue
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/antiseptics_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-antiseptic"></i>Антисептики
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/lubricants_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-lubricants"></i>Смазки
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/compressors_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-compressor"></i>Компрессоры
 +
    </a>
 +
</li>
 +
<li>
 +
    <a href="/sockets_catalog">
 +
<i class="fr-catalog-icon fr-catalog-icon-sockets"></i>Головки торцевые
 +
    </a>
 +
</li>
 +
    </ul>
 +
<style>
 +
.catalogsCont {
 +
    width: 100%;
 +
    margin-bottom: 40px;
 +
}
 +
 
 +
.catalogsCont > ul {
 +
    list-style: none;
 +
    padding: 0;
 +
    margin: -6px;
 +
    display: flex;
 +
    flex-wrap: wrap;
 +
}
 +
 
 +
.catalogsCont > ul > li {
 +
    width: calc(20% - 12px);
 +
    margin: 6px;
 +
}
 +
 
 +
.catalogsCont > ul > li > a {
 +
    font-size: 13px;
 +
    line-height: 1.2;
 +
    color: #222;
 +
            text-decoration: none;
 +
    background-color: #efefef;
 +
    height: 50px;
 +
    padding: 0 9px 0 10px;
 +
    border-radius: 3px;
 +
    position: relative;
 +
    display: flex;
 +
    align-items: center;
 +
    justify-content: flex-start;
 +
    transition: background-color 0.25s ease;
 +
}
 +
 
 +
.catalogsCont > ul > li > a:hover {
 +
    background: #dbdbdb
 +
}
 +
 
 +
.catalogsCont > ul > li > a .fr-label.fr-label-success {
 +
    background-color: #3eaa05;
 +
    padding-top: .3em;
 +
    margin-left: 7px
 +
}
 +
 
 +
.catalogsCont > ul > li i {
 +
    font-size: 34px;
 +
    margin-right: 10px
 +
}
 +
 
 +
.catalogsCont > ul > li.fr-dropdown {
 +
    position: relative;
 +
}
 +
 
 +
.catalogsCont > ul > li > a.fr-dropdown-toggle {
 +
    padding-right: 0;
 +
}
 +
 
 +
.catalogsCont > ul > li .catalogs-dropdown__arrow {
 +
    padding: 2px 7px 0 4px;
 +
    border-left: 1px solid #fff;
 +
    height: 100%;
 +
    box-sizing: border-box;
 +
    margin-left: auto;
 +
    display: flex;
 +
    align-items: center;
 +
}
 +
 
 +
.catalogsCont > ul > li .fr-icon-arrow-down2 {
 +
    font-size: 20px;
 +
    color: #414141;
 +
}
 +
 
 +
.catalogsCont .fr-dropdown-menu {
 +
    border: none;
 +
    background: #DBDBDB;
 +
    width: 100%;
 +
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 +
    padding-bottom: 3px;
 +
            z-index: 1000;
 +
}
 +
 
 +
.catalogsCont .fr-dropdown-menu li {
 +
    margin-bottom: 1px;
 +
}
 +
 
 +
.catalogsCont .fr-dropdown-menu li a {
 +
    font-size: 12px;
 +
    color: #000;
 +
            white-space: normal;
 +
    padding: 4px 11px;
 +
}
 +
 
 +
.catalogsCont .fr-dropdown-menu li a:hover {
 +
    color: #414141;
 +
    background-color: #C4C4C4;
 +
}
 +
 
 +
.catalogsCont > ul > li.open .fr-dropdown-toggle {
 +
    background: #dbdbdb;
 +
}
 +
 
 +
.catalogsCont > ul > li.open .catalogs-dropdown__arrow {
 +
    background: #C4C4C4;
 +
    border-radius: 0 3px 3px 0;
 +
}
 +
 
 +
@media (max-width: 1199px){
 +
    .catalogsCont > ul > li {
 +
width: calc(25% - 12px);
 +
    }
 +
}
 +
 
 +
@media (max-width: 992px){
 +
    .catalogsCont > ul > li {
 +
width: calc(33.3% - 12px);
 +
    }
 +
}
 +
 
 +
@media (max-width: 767px){
 +
    .catalogsCont > ul > li {
 +
                font-size: 14px;
 +
width: calc(50% - 12px);
 +
    }
 +
 
 +
            .catalogsCont > ul > li a,
 +
            .catalogsCont .fr-dropdown-menu li a {
 +
                font-size: 14px;
 +
            }
 +
}
 +
 
 +
@media (max-width: 481px){
 +
    .catalogsCont > ul > li {
 +
width: 100%;
 +
    }
 +
}
 +
    </style>
 +
</div>
 +
</pre>

Версия 15:13, 13 февраля 2023

Дополнительные варианты отображения плиток каталогов

Вариант 1 (Все подпункты видны сразу)

Cat-var-1.png 

<div class="catalogsCont">
    <ul>
	<li>
	    <a href="/carbase">
		<i class="fr-catalog-icon fr-catalog-icon-tecdoc"></i>Запчасти для ТО
	    </a>
	</li>
	<li>
	    <a href="/auto2dV2">
		<i class="fr-catalog-icon fr-catalog-icon-original"></i>Оригинальные каталоги
	    </a>
	</li>
	<li>
	    <a href="/accessories_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-accestories"></i>Аксессуары
	    </a>
	</li>
	<li>
	    <a href="/light">
		<i class="fr-catalog-icon fr-catalog-icon-car-lights2"></i>Лампы
	    </a>
	</li>
	<li>
	    <a href="/lamps_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-car-lights"></i>Лампы по параметрам
	    </a>
	</li>
	<li>
	    <a href="/poly_v_belts_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-belts"></i>Ремни поликлиновые
	    </a>
	</li>
	<li>
	    <a href="/oils_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-oil"></i>Масла
	    </a>
	</li>
	<li>
	    <a href="/gear_oils_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-gear-oil"></i>Трансмиссионные масла
	    </a>
	</li>
	<li>
	    <a href="/coolant_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-coolant"></i>Охлаждающие жидкости
	    </a>
	</li>
	<li>
	    <a href="/brake_fluids_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-brake_fluids"></i>Тормозные жидкости
	    </a>
	</li>
	<li>
	    <a href="/washer_liquids_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-washer-fluid"></i>Жидкости стеклоомывателя
	    </a>
	</li>
	<li class="multicontent-block multicontent-block-3">
	    <div class="multicontent-block__header">
		<i class="fr-catalog-icon fr-catalog-icon-tires_search"></i>
                <a href="/wheel_calc">Подбор шин по Авто</a>
	    </div>
	    <ul class="multicontent-block__items">
		<li>
		    <a href="/tires_catalog">Шины</a>
		</li>
		<li>
		    <a href="/disks_catalog">Диски</a>
		</li>
		<li>
		    <a href="/moto_tires_catalog">Мотошины</a>
		</li>
		<li>
		    <a href="/truck_tires_catalog">Грузовые шины</a>
		</li>
	    </ul>
	</li>
	<li>
	    <a href="/batteries_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-battery"></i>Аккумуляторы
	    </a>
	</li>
	<li>
	    <a href="/wipers_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-wipers"></i>Щётки стеклоочистителя
	    </a>
	</li>
	<li>
	    <a href="/emergency_waistcoats_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-emergency_waistcoats"></i>Сигнальные жилеты
	    </a>
	</li>
	<li class="multicontent-block multicontent-block-2">
	    <div class="multicontent-block__header">
		<i class="fr-catalog-icon fr-catalog-icon-cleaning"></i>
                <a href="/ext_cleaners_catalog">Уход и очистка</a>
	    </div>
	    <ul class="multicontent-block__items">
		<li>
		    <a href="/vacuum_cleaners_catalog">Бытовые пылесосы</a>
		</li>
		<li>
		    <a href="/pressure_washers_catalog">Мойки высокого давления</a>
		</li>
	    </ul>
	</li>
	<li>
	    <a href="/fuel_additives_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-fuel_additives"></i>Топливные присадки
	    </a>
	</li>
	<li>
	    <a href="/cooling_system_additives_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-cooling_system_additives"></i>Присадки в систему охлаждения
	    </a>
	</li>
	<li>
	    <a href="/steering_wheel_cover_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-steering-wheel-covers"></i>Оплетки на руль
	    </a>
	</li>
	<li>
	    <a href="/industrial_gear_oils_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-barrel"></i>Масла индустриальные редукторные
	    </a>
	</li>
	<li>
	    <a href="/scooter_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-scooter"></i>Самокаты
	    </a>
	</li>
	<li>
	    <a href="/flushing_oils_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-flush_oil"></i>Масла промывочные
	    </a>
	</li>
	<li>
	    <a href="/adblue_liquids_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-adblue_liquids"></i>Жидкости AdBlue
	    </a>
	</li>
	<li>
	    <a href="/antiseptics_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-antiseptic"></i>Антисептики
	    </a>
	</li>
	<li>
	    <a href="/lubricants_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-lubricants"></i>Смазки
	    </a>
	</li>
	<li>
	    <a href="/compressors_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-compressor"></i>Компрессоры
	    </a>
	</li>
	<li>
	    <a href="/sockets_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-sockets"></i>Головки торцевые
	    </a>
	</li>
    </ul>
    <style>
	.catalogsCont {
	    width: 100%;
	    margin-bottom: 40px;
	}

	.catalogsCont > ul {
	    list-style: none;
	    padding: 0;
	    margin: 0;
	    display: grid;
	    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	    grid-gap: 12px;
	}

	.catalogsCont > ul > li {
	    font-size: 13px;
	    color: #222;
	    height: 50px;
	    border-radius: 3px;
	    overflow: hidden;
	}

	.catalogsCont > ul > li > a {
	    line-height: 1.2;
	    color: #222;
	    text-decoration: none;
	    background-color: #efefef;
	    padding: 0 9px 0 10px;
	    height: 100%;
	    position: relative;
	    display: flex;
	    align-items: center;
	    justify-content: flex-start;
	    transition: background-color 0.25s ease;
	}

	.catalogsCont > ul > li > a .fr-label.fr-label-success {
	    background-color: #3eaa05;
            padding-top: .3em;
	    margin-left: 7px
	}

	.catalogsCont > ul > li > a:hover {
	    background: #dbdbdb
	}

	.catalogsCont ul li i {
	    font-size: 34px;
	    margin-right: 10px
	}

	.catalogsCont .multicontent-block {
	    font-size: 12px;
	    background-color: #efefef;
	    height: auto;
	}

	.catalogsCont .multicontent-block-2 {
	    grid-row: auto / span 2;
	}

	.catalogsCont .multicontent-block-3 {
	    grid-row: auto / span 3;
	}

	.catalogsCont .multicontent-block-4 {
	    grid-row: auto / span 4;
	}

	.catalogsCont .multicontent-block-5 {
	    grid-row: auto / span 5;
	}

	.catalogsCont .multicontent-block-6 {
	    grid-row: auto / span 6;
	}

	.catalogsCont .multicontent-block__header {
	    display: flex;
	    align-items: center;
	    padding: 9px 8px 0 11px;
            height: auto;
        }

        .catalogsCont .multicontent-block__header a {
            flex-grow: 1;
        }

        .catalogsCont .multicontent-block__header a,
	.catalogsCont .multicontent-block__items li a {
	    color: #222;
	    padding: 5px;
	    border-radius: 3px;
	    text-decoration: none;
	    display: block;
	    transition: background-color 0.25s ease;
	}

	.catalogsCont .multicontent-block__header a:hover,
	.catalogsCont .multicontent-block__items li a:hover {
	    background-color: #dbdbdb;
	}

	.catalogsCont .multicontent-block__header i {
	    margin-right: 5px;
	}

	.catalogsCont .multicontent-block__items {
	    list-style: none;
	    padding: 0 8px 0 50px;
	    margin: 0;
	}

	.catalogsCont .multicontent-block__items li:not(:last-child){
	    margin-bottom: 3px;
	}

	@media (max-width: 1199px) {
	    .catalogsCont > ul {
	        grid-template-columns: 1fr 1fr 1fr 1fr;
	    }

            .catalogsCont .multicontent-block {
	        font-size: 13px;
	    }
	}

	@media (max-width: 992px) {
	    .catalogsCont > ul {
	        grid-template-columns: 1fr 1fr 1fr;
	    }

            .catalogsCont .multicontent-block__items li:not(:last-child) {
                margin-bottom: 2px;
            }
	}

	@media (max-width: 767px) {
	    .catalogsCont > ul {
	        grid-template-columns: 1fr 1fr;
	    }

            .catalogsCont .multicontent-block__items li:not(:last-child) {
                margin-bottom: 0;
            }

	    .catalogsCont > ul > li,
            .catalogsCont .multicontent-block {
	        font-size: 14px
            }
	}

	@media (max-width: 481px) {
	    .catalogsCont > ul {
	        grid-template-columns: 1fr;
	    }

            .catalogsCont .multicontent-block__items {
                padding-bottom: 9px;
            }
	}
    </style>
</div>


Вариант 2 (Выпадающие списки)

Cat-var-2.png 

<div class="catalogsCont">
    <ul>
	<li>
	    <a href="/carbase">
		<i class="fr-catalog-icon fr-catalog-icon-tecdoc"></i>Запчасти для ТО
	    </a>
	</li>
	<li>
	    <a href="/auto2dV2">
		<i class="fr-catalog-icon fr-catalog-icon-original"></i>Оригинальные каталоги
	    </a>
	</li>
	<li>
	    <a href="/accessories_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-accestories"></i>Аксессуары
	    </a>
	</li>
	<li>
	    <a href="/light">
		<i class="fr-catalog-icon fr-catalog-icon-car-lights2"></i>Лампы
	    </a>
	</li>
	<li>
	    <a href="/lamps_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-car-lights"></i>Лампы по параметрам
	    </a>
	</li>
	<li>
	    <a href="/poly_v_belts_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-belts"></i>Ремни поликлиновые
	    </a>
	</li>
	<li class="fr-dropdown catalogs-dropdown">
	    <a href="#" class="fr-dropdown-toggle" data-toggle="dropdown">
		<i class="fr-catalog-icon fr-catalog-icon-oil"></i>Масла и жидкости
		<span class="catalogs-dropdown__arrow">
		    <span class="fr-icon-arrow-down2"></span>
		</span>
	    </a>
	    <ul class="fr-dropdown-menu">
		<li>
		    <a href="/hydraulic_oil_catalog">Масла гидравлические</a>
		</li>
		<li>
		    <a href="/washer_liquids_catalog">Жидкости стеклоомывателя</a>
		</li>
		<li>
		    <a href="/industrial_gear_oils_catalog">Масла редукторные</a>
		</li>
		<li>
		    <a href="/oils_catalog">Моторные масла</a>
		</li>
		<li>
		    <a href="/oil_additives_catalog">Присадки в масла</a>
		</li>
		<li>
		    <a href="/cooling_system_additives_catalog">Присадки в систему охлаждения</a>
		</li>
		<li>
		    <a href="/flushing_oils_catalog">Масла промывочные</a>
		</li>
		<li>
		    <a href="/fuel_additives_catalog">Присадки в топливо</a>
		</li>
		<li>
		    <a href="/brake_fluids_catalog">Тормозные жидкости</a>
		</li>
		<li>
		    <a href="/gear_oils_catalog">Трансмиссионные масла</a>
		</li>
		<li>
		    <a href="/coolant_catalog">Охлаждающие жидкости</a>
		</li>
	    </ul>
	</li>
	<li>
	    <a href="/wheel_calc">
		<i class="fr-catalog-icon fr-catalog-icon-tires_search"></i>Подбор шин по Авто
	    </a>
	</li>
	<li>
	    <a href="/tires_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-tire"></i>Шины
	    </a>
	</li>
	<li>
	    <a href="/disks_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-disks"></i>Диски
	    </a>
	</li>
	<li>
	    <a href="/moto_tires_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-moto-tyres"></i>Мотошины
	    </a>
	</li>
	<li>
	    <a href="/truck_tires_catalog">
	        <i class="fr-catalog-icon fr-catalog-icon-truck-tire"></i>Грузовые шины
	    </a>
	</li>
	<li>
	    <a href="/batteries_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-battery"></i>Аккумуляторы
	    </a>
	</li>
	<li>
	    <a href="/wipers_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-wipers"></i>Щётки стеклоочистителя
	    </a>
	</li>
	<li>
	    <a href="/emergency_waistcoats_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-emergency_waistcoats"></i>Сигнальные жилеты
	    </a>
	</li>
	<li>
	    <a href="/ext_cleaners_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-cleaning"></i>Уход и очистка
	    </a>
	</li>
	<li>
	    <a href="/steering_wheel_cover_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-steering-wheel-covers"></i>Оплетки на руль
	    </a>
	</li>
	<li>
	    <a href="/scooter_catalog">
	    	<i class="fr-catalog-icon fr-catalog-icon-scooter"></i>Самокаты
	    </a>
	</li>
	<li>
	    <a href="/adblue_liquids_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-adblue_liquids"></i>Жидкости AdBlue
	    </a>
	</li>
	<li>
	    <a href="/antiseptics_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-antiseptic"></i>Антисептики
	    </a>
	</li>
	<li>
	    <a href="/lubricants_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-lubricants"></i>Смазки
	    </a>
	</li>
	<li>
	    <a href="/compressors_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-compressor"></i>Компрессоры
	    </a>
	</li>
	<li>
	    <a href="/sockets_catalog">
		<i class="fr-catalog-icon fr-catalog-icon-sockets"></i>Головки торцевые
	    </a>
	</li>
    </ul>
	<style>
	.catalogsCont {
	    width: 100%;
	    margin-bottom: 40px;
	}

	.catalogsCont > ul {
	    list-style: none;
	    padding: 0;
	    margin: -6px;
	    display: flex;
	    flex-wrap: wrap;
	}

	.catalogsCont > ul > li {
	    width: calc(20% - 12px);
	    margin: 6px;
	}

	.catalogsCont > ul > li > a {
	    font-size: 13px;
	    line-height: 1.2;
	    color: #222;
            text-decoration: none;
	    background-color: #efefef;
	    height: 50px;
	    padding: 0 9px 0 10px;
	    border-radius: 3px;
	    position: relative;
	    display: flex;
	    align-items: center;
	    justify-content: flex-start;
	    transition: background-color 0.25s ease;
	}

	.catalogsCont > ul > li > a:hover {
	    background: #dbdbdb
	}

	.catalogsCont > ul > li > a .fr-label.fr-label-success {
	    background-color: #3eaa05;
	    padding-top: .3em;
	    margin-left: 7px
	}

	.catalogsCont > ul > li i {
	    font-size: 34px;
	    margin-right: 10px
	}

	.catalogsCont > ul > li.fr-dropdown {
	    position: relative;
	}

	.catalogsCont > ul > li > a.fr-dropdown-toggle {
	    padding-right: 0;
	}

	.catalogsCont > ul > li .catalogs-dropdown__arrow {
	    padding: 2px 7px 0 4px;
	    border-left: 1px solid #fff;
	    height: 100%;
	    box-sizing: border-box;
	    margin-left: auto;
	    display: flex;
	    align-items: center;
	}

	.catalogsCont > ul > li .fr-icon-arrow-down2 {
	    font-size: 20px;
	    color: #414141;
	}

	.catalogsCont .fr-dropdown-menu {
	    border: none;
	    background: #DBDBDB;
	    width: 100%;
	    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	    padding-bottom: 3px;
            z-index: 1000;
	}

	.catalogsCont .fr-dropdown-menu li {
	    margin-bottom: 1px;
	}

	.catalogsCont .fr-dropdown-menu li a {
	    font-size: 12px;
	    color: #000;
            white-space: normal;
	    padding: 4px 11px;
	}

	.catalogsCont .fr-dropdown-menu li a:hover {
	    color: #414141;
	    background-color: #C4C4C4;
	}

	.catalogsCont > ul > li.open .fr-dropdown-toggle {
	    background: #dbdbdb;
	}

	.catalogsCont > ul > li.open .catalogs-dropdown__arrow {
	    background: #C4C4C4;
	    border-radius: 0 3px 3px 0;
	}

	@media (max-width: 1199px){
	    .catalogsCont > ul > li {
		width: calc(25% - 12px);
	    }
	}

	@media (max-width: 992px){
	    .catalogsCont > ul > li {
		width: calc(33.3% - 12px);
	    }
	}

	@media (max-width: 767px){
	    .catalogsCont > ul > li {
                font-size: 14px;
		width: calc(50% - 12px);
	    }

            .catalogsCont > ul > li a,
            .catalogsCont .fr-dropdown-menu li a {
                font-size: 14px;
            }
	}

	@media (max-width: 481px){
	    .catalogsCont > ul > li {
		width: 100%;
	    }
	}
    </style>
</div>
Источник — https://www.abcp.ru/w/index.php?title=Catalog-tile-options&oldid=14220