Перейти к содержанию
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>

Изменено пользователем AlexFisher
[code]

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


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

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

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

#menu > ul > li > div > ul {

display: table-cell;

}

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

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

display: table-cell;

}

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

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


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

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

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


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

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

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

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

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

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

Войти

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

Войти

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

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

×

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

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