Всем привет.
Opencart 1.5.6
Застрял капитально с вертикальным меню.
Что хочу сделать:
Список разделов и подразделов должен оставаться всегда на одном месте.
Причём, это не наведению мыши, а именно по нажатию на раздел.
То есть, нажали на Раздел 1 - попали в Раздел 1 и списком подразделов справа.
Напомню. Всё это делается в stylesheet.css + .../template/module/category.tpl
До чего я дошёл:
category.tpl (оригинал)
<div class="box">
<div class="box-content">
<ul class="box-category"><div>
<?php foreach ($categories as $category) { ?>
<li>
<?php if ($category['category_id'] == $category_id) { ?>
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>
<?php if ($category['children']) { ?>
<ul>
<?php foreach ($category['children'] as $child) { ?>
<li>
<?php if ($child['category_id'] == $child_id) { ?>
<a href="<?php echo $child['href']; ?>" class="active"> - <?php echo $child['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $child['href']; ?>"> - <?php echo $child['name']; ?></a>
<?php } ?>
</li>
<?php } ?>
</ul>
<?php } ?>
</li>
<?php } ?>
</div></ul>
</div>
</div>
stylesheet.css (оригинал)
/* box category */
ul.box-category, ul.box-category ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.box-category > li:first-child {
padding: 0px 8px 8px 0px;
}
ul.box-category > li {
padding: 8px 8px 8px 0px;
}
ul.box-category > li + li {
border-top: 1px solid #EEEEEE;
}
ul.box-category > li > a {
text-decoration: none;
color: #333;
}
ul.box-category > li ul {
display: none;
}
ul.box-category > li a.active {
font-weight: bold;
}
ul.box-category > li a.active + ul {
display: block;
}
ul.box-category > li ul > li {
padding: 5px 5px 0px 10px;
}
ul.box-category > li ul > li > a {
text-decoration: none;
display: block;
}
ul.box-category > li ul > li > a.active {
font-weight: bold;
}
category.tpl (мой)
<div class="box">
<?php foreach ($categories as $category) { ?>
<div class="box-category">
<?php if ($category['category_id'] == $category_id) { ?>
<div class="active"><a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a></div>
<?php } else { ?>
<div><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></div>
<?php } ?>
</div>
<div class="category-list">
<?php if ($category['children']) { ?>
<?php foreach ($category['children'] as $child) { ?>
<?php if ($child['category_id'] == $child_id) { ?>
<a href="<?php echo $child['href']; ?>" class="active"> - <?php echo $child['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $child['href']; ?>"> - <?php echo $child['name']; ?></a>
<?php } ?>
<?php } ?>
<?php } ?>
</div>
<?php } ?>
</div>
stylesheet.css (мой)
.box-category {
width: 218px;
}
.box-category div {
height: 25px;
cursor: pointer;
}
.box-category div a {
margin-left: 8px;
}
.box-category div.active {
height: 25px;
cursor: pointer;
}
.box-category div a.active {
margin-left: 14px;
}
.category-list {
display: none;
width: 218px;
float: left;
}
.category-list a {
color: white;
}
В этом виде показываются только разделы. И затык в том, что в оригинальном css подразделы выводятся за счёт
ul.box-category > li a.active + ul {display: block;}
ТО есть, когда у раздела стоит active - блок показывается. Пробую сделать эту же связку с div'ами - не получается, ибо
div.box-category div.active + div.category-list {
display: block;
}
работать не хочет. Понимаю, что в данной конструкции сие сделать нельзя пробую использовать следующий код:
<script type="text/javascript">
if ($(".box-category > div.active").length > 0) {
$('.category-list').css("display", "block");
}
</script>
Ставлю его под кодом в category.tpl - начинает выводить все подкатегории всем списком под разделами.
Помогите, плиз.
Спасибо.