[Решено] меню в несколько колонок

[alexkl]

Здравствуйте

Подскажите пожалуйста кто знает. Хочу сделать многоуровневое меню, с разбивкой на несколько колнок.

Число колонок зависит от количества элементов в меню.

Изменил header.tpl Предварительно сделал, чтобы архив category['children'] включал еще один уровень category['children'][$i]['children'] Получается три уровня. Мне больше не нужно.

Например мне нужно чтобы если число элементов больше 9 то разбивается на 2 колонки, если соответственно больше 18, то на 3 колонки. Сделал 3 блока. Если получается 2 колонки, то у ul width делается в два раза больше (class 'width2'), а длина li делатся 50% и float:left (class 'nextcolumn50'). Если 3 колонки, то у ul width делается в 3 раза больше (class 'width3'), а длина li делатся 33.3% и float:left (class 'nextcolumn33').

Все работает, но элементы выводятся не так как мне нужно. Заполняется построчно, а мне нужно по столбцам.

Т.е. заполняется:

a b c

d e f

g h i

нужно

a d g

b e h

c f i

Можно переделать циклы и вывести как нужно. Но чувсвую это все как то криво.

Так как в коде в цикле уже стоит разбивка на столбцы: / $category['column']

Но я не пойму как это работает. Если например поставить количество столбцов у категории = 2

То работать это будет только у категорий верхнего уровня, а второй уровень будет разбиваться на 2 клонки

Если поставить количество столбцов=2 у категории второго уровня, то в 3-м не разбивается, выводится один ul заполняется столбец, потом еще один ul, но он получается ниже первого и чуть смещен вправо. Все также, но не работает. Может в css что-то, не могу понять.

Может кто-нибудь знает, где прописана разбивка меню на столбцы для верхнего уровня при изменении количества столбцов у категории в админке?

Вот мой код:

<div id="menu">
 <ul>
<?php foreach ($categories as $category) { ?>
<li><?php if ($category['active']) { ?>
<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']) { ?>
  <div>
	<?php for ($i = 0; $i < count($category['children']) ;) { ?>
	<ul>
	  <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
	  <?php for (; $i < $j; $i++) { ?>
	  <?php if (isset($category['children'][$i])) { ?>
	  <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a>

  	 <?php if ($category['children'][$i]['children']) {
		echo "<div>";
	$cnttotal=count($category['children'][$i]['children']);
	for ($ii = 0; $ii < $cnttotal; ) {

	if ($cnttotal<=9) {
	  echo "<ul>";
	  $jj = $ii + ceil(count($category['children'][$i]['children']) / $category['column']);
	  $cnt=0;
  		   for (; $ii < $jj; $ii++) {
			 if (isset($category['children'][$i]['children'][$ii])) {
	 	   ?>
   	   <li><a href="<?php echo $category['children'][$i]['children'][$ii]['href']; ?>"><?php echo $category['children'][$i]['children'][$ii]['name']; ?></a></li>
   	   <?php
   	 }
	  }
	  echo "</ul>";
	}
	elseif ($cnttotal<=18) {
	  echo "<ul class='width2'>";
	  $jj = $ii + ceil(count($category['children'][$i]['children']) / $category['column']);
	  $cnt=0;
  		   for (; $ii < $jj; $ii++) {
			 if (isset($category['children'][$i]['children'][$ii])) {
	 	   ?>
   	   <li class='nextcolumn50'><a href="<?php echo $category['children'][$i]['children'][$ii]['href']; ?>"><?php echo $category['children'][$i]['children'][$ii]['name']; ?></a></li>
   	   <?php
   	 }
	  }
	  echo "</ul>";
	}
	else {
	  echo "<ul class='width3'>";
	  $jj = $ii + ceil(count($category['children'][$i]['children']) / $category['column']);
	  $cnt=0;
  		   for (; $ii < $jj; $ii++) {
			 if (isset($category['children'][$i]['children'][$ii])) {
	 	   ?>
   	   <li class='nextcolumn33'><a href="<?php echo $category['children'][$i]['children'][$ii]['href']; ?>"><?php echo $category['children'][$i]['children'][$ii]['name']; ?></a></li>
   	   <?php
   	 }
	  }
	  echo "</ul>";
	}

  		 }
		echo "</div>";
  	 } ?>

  </li>
	  <?php } ?>
	  <?php } ?>
	</ul>
	<?php } ?>
  </div>
  <?php } ?>
</li>
<?php } ?>
 </ul>
</div>

Змінено 10 лютого 2013 користувачем AlexFisher
[code]

[alexkl]

Все разобрался. Переключение на несколько столбцов в css

Чтобы ul отображался не ниже предыдущего ul а справа как новый столбец, нужно вот это ( и шириной не нужно манипулировать!)

#menu > ul > li > div > ul {

display: table-cell;

}

Соответственно добавил

#menu > ul > li > div > ul > li > div > ul {

display: table-cell;

}

Остается только подставлять нужное количество столбцов вместо $category['column'] или же менять в админке. Все значительно упрощается.

[AlexShkundia]

Здраствуйте. Не могли бы помочь с реализацией подобного? В настройках категории выставляю колличесво столбцов- но ничего не меняется. OC 1.5. Шаблон - journal 2. http://meb.beltexttextile.com/ - Пункт - Коллекции.