Перейти к содержанию
KegP

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

Рекомендуемые сообщения

Всем привет.

Opencart 1.5.6

Застрял капитально с вертикальным меню.

Что хочу сделать:

 

menugif_6562335_10022496.gif

 

Список разделов и подразделов должен оставаться всегда на одном месте.

Причём, это не наведению мыши, а именно по нажатию на раздел.

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

 

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

 

Спасибо.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.