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

Catalog-tile-options

Статья Обсуждение

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

Стандартные плитки

<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>

        ...

    </ul>
</div>


Вариант 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=14223