- Регистрация
- 22 Мар 2017
- Сообщения
- 9
- Реакции
- 37
- Заблокирован
- #591
Я хотел рассмотреть ваш вариант вывода подкатегорий с кодом, js и стилями. Я так понимаю, что ваш отличается от моего.
Код:
<div class="f-categories hidden-phone">
<div class="f-categories-in" id="j-f-categories-block">
<? $cats = ( array($cats) ); foreach($cats as $catsChunk:( ?>
<? foreach($catsChunk as $v:( ?>
<ul class="f-categories-col">
<li><a href="<?= $v['l'] ?>" class="<? if($v['active']) { ?>active<? } ?>" title="<?= $v['t'] ?>"><span class="f-categories-col-item"><?= $v['t'] ?><? if($v['subs']) { ?> »<? } ?></span>
<span class="f-categories-col-count"><?= $v['items'] ?></span></a></li>
</ul>
<? endforeach; ?>
<? endforeach; ?>
</div>
</div>
C-C-S
/* Filter Categories */
.pt10{padding-top:10px;}
.f-categories { padding: 15px 15px 0 15px;}
@media (max-width: 991px) { .f-categories { padding: 15px 0 0 0; } }
.f-categories-in { margin-left: -5px; margin-right: -5px; }
.f-categories-in:after { clear: both; content: ''; display: block; }
.f-categories-col { display: block; float: left; width: 25%; padding: 0; margin: 0; list-style: none; }
.f-categories-col > li { padding: 0 10px; margin-bottom: 7px; height: 18px; }
.f-categories-col > li:after { display: block; content: ''; clear: both; }
.f-categories-col > li a { display: flex; text-decoration: none; height: 16px; border-bottom: 1px dotted #ccc; }
.active { color:#000000; }
.f-categories-col > li a:hover { color: black; }
.f-categories-col-more > a { display: inline-block !important; width: auto !important; height: 18px !important; }
.f-categories-col-item { padding-right: 3px; white-space: nowrap; overflow: hidden; height: 18px; background-color: white; position: relative;}
.f-categories-col-count { padding-left: 8px; margin-left: auto; color: #999999; white-space: nowrap; font-size: 13px; background-color: white; position: relative; bottom: -1px; }
.f-categories-col-wht { background-color: FFFFFF; position: relative; bottom: -3px; }
Последнее редактирование модератором: