Вертикальное меню

[KegP]

Всем привет.

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

 

Помогите, плиз.

 

Спасибо.

 

[KegP]

Я так понимаю - это просто нереально... :(

[KegP]

Кароч, вот решение...

Мало ли кому понадобится...

.../template/module/category.tpl

 

<?php
    $menu1 = "";
    $menu2 = "";
foreach ($categories as $category) {
       if ($category['category_id'] == $category_id) {
         $menu1 .= "<a href=". $category['href'] ." class=\"active\">". $category['name'] ."</a>";
      } else {
         $menu1 .= "<a href=". $category['href'] .">". $category['name']. "</a>";
       }

    if ($category['category_id'] == $category_id) {
        if ($category['children']) {
         foreach ($category['children'] as $child) {
           if ($child['category_id'] == $child_id) {
           $menu2 .= "<a href=". $child['href'] ." class=\"active\">". $child['name'] ."</a><br>";
           } else {
           $menu2 .= "<a href=". $child['href'] .">". $child['name'] ."</a><br>";
          }
       }
        }
}
}
?>

<div class="box" style="width:300px;">
<div style="float:left; width:150px;"><?=$menu1?></div>
<div style="float:left; width:150px;"><?=$menu2?></div>
</div>

Дальше своими стилями...