Выпадающее меню в несколько колонок вместо одной

[StarShop]

Всем добрый день!

Прошу помощи в доработке выпадающее меню с категориями на сайте http://star-shop.kiev.ua/
Сделать выпадающее меню типа по шире, чтобы разделы формировались как-то автоматически в 3-4-5 колонки на всю вот эту ширину http://prntscr.com/b5lu7p

Не знаю как правильно описать, но планируется 5-7 категорий в этом горизонтальном меню, и при наведение на каждое из них нужно отображать подкатегории в несколько колонок, может там надо будет задать какое-то конкретное количество строк в списке и после чего автоматом переносить во вторую колонку

 

 

 

 

[admin]

тему шаблона своего перечитайте от корки до корки там был ответ

[StarShop]

ну я понимаю что там все жестко в 1 столбец http://prnt.sc/b7fbwi

но я вот и прошу помощи в переделывание этого меню в 3-4-5 колонок на всю ширину сайта
можно ли как-то это решить эту задачу? очень нужно такое меню

[WarStyle]

2 часа назад, StarShop сказал:

ну я понимаю что там все жестко в 1 столбец http://prnt.sc/b7fbwi

но я вот и прошу помощи в переделывание этого меню в 3-4-5 колонок на всю ширину сайта
можно ли как-то это решить эту задачу? очень нужно такое меню

 

 

[StarShop]

4 минуты назад, WarStyle сказал:

 

 

 

О! Так это дело же))
Спасибо большое)) помогли!
Все, дальше я сам, благодарю!

[WarStyle]

15 минут назад, StarShop сказал:

 

О! Так это дело же))
Спасибо большое)) помогли!
Все, дальше я сам, благодарю!

 

Вам сразу сказали что необходимо сделать, не за что)

[StarShop]

Нуууу знать бы еще и понимать где его копать))

Спасибо

[АлександрAvega]

Добрый день!

Подскажите, как сделать несколько колонок в выпадающем меню.

Все меню не влазит, так как там 36 категорий.

Желательно разделить на 4 столбца.

Помогите пожалуйста, никак не могу разобраться...

Сайт avega-group.ru

Прикрепляю код css и код вывода меню.

css

Скрытый текст

 

#menu{margin-top:1px;width:200px;position:relative;top:0;}
#menu ul{list-style:none;margin:0;padding:0;}
#menu > ul > li{text-align:right;background:url("../image/textures/subtle-pattern-2-2s.jpg") repeat scroll 0 0 rgba(0, 0, 0, 1);border-top:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC;margin-top:-1px;}
#menu > ul > li:hover{}
#menu > ul > li > a{background-color:rgba(255, 255, 255, 0.6);}
#menu > ul > li > div > a{border:none;}
#menu > ul > li > a{border-top:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;font-size:13px;color:#000000;line-height:14px;text-decoration:none;display:block;padding:9px 15px 9px 5px;z-index:4;position:relative;text-transform:uppercase;-webkit-transition:all 300ms ease-out 0s;-moz-transition:all 300ms ease-out 0s;-o-transition:all 300ms ease-out 0s;-ms-transition:all 300ms ease-out 0s;}
#menu > ul > li.children:hover > a.expan:after{content:"";position:absolute;left:97%;bottom:9px;width:0;height:0;border-top:9px solid rgba(0, 0, 0, 0);border-left:9px solid rgba(0, 0, 0, 0);border-right:9px solid #757575;border-bottom:9px solid rgba(0, 0, 0, 0);}
#menu > ul > li > a.active,
#menu > ul > li:hover > a{background-color:rgba(0,0,0,0.5);color:#FFF;}
#menu > ul > li > div{display:none;position:absolute;left:211px;z-index:5;/*padding-left:12px;*/margin-top:-71px;}
#menu > ul > li:hover > div{display:table;}
#menu > ul > li > div > ul{background:#757575;display:table-cell;}
#menu > ul > li ul + ul{}
#menu > ul > li ul > li > a{background-color:#757575;text-decoration:none;padding:8px 12px;color:#FFFFFF;border-bottom:1px solid #353D42;display:block;white-space:nowrap;min-width:186px;}
#menu > ul > li ul > li > a:hover{background:#22282B;color:#993333;}
#menu > ul > li > div > ul > li > a{color:#FFFFFF;text-align:left;}
#menu .menu-item.menu-item_59 > div{margin-top: -35px;}

код

Скрытый текст

 <?php foreach($categories as $category){ ?>
            <?php
            $count_children = count($category['children']);
            $item_classes = "menu-item menu-item_$category[category_id]" . ($count_children ? ' children' : '');
            ?>
            <li class="<?=$item_classes?>">
                <?php if($category['active']){ ?>
                    <a href="<?php echo $category['href']; ?>" class="active expan"><?php echo $category['name']; ?></a>
                <?php }else{ ?>
                    <a class='expan' href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
                <?php } ?>
                <?php if($count_children){ ?>
                    <div style="margin-left: 0;">
                        <ul>
                            <?php foreach($category['children'] as $child){ ?>
                                <li><a href="<?=$child['href']?>"><?=$child['name']?></a>
                            <?php } ?>
                        </ul>
                    </div>
                <?php } ?>
            </li>
        <?php } ?>

 

Также прикрепляю картинки, как сделано сейчас и как было бы в идеале.

Похожая реализация сделана на сайте gigant-dveri.ru

Буду благодарен за любую информацию!!!

Скрытый текст

Скрытый текст

[alex-messer]

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