Search the Community

Всем привет. 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 - начинает выводить все подкатегории всем списком под разделами. Помогите, плиз. Спасибо.