Jump to content
Sign in to follow this  
alexkl

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

Recommended Posts

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

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

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

Изменил 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>

Edited by AlexFisher
[code]

Share this post


Link to post
Share on other sites

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

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

#menu > ul > li > div > ul {

display: table-cell;

}

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

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

display: table-cell;

}

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.