ivan888 Опубликовано 28 апреля, 2012 Автор Жалоба Поделиться Опубликовано 28 апреля, 2012 Интересно... Скорей всего так и сделаю. Спасибо за совет Цитата Ссылка на сообщение Поделиться на другие сайты
eldano Опубликовано 6 мая, 2012 Жалоба Поделиться Опубликовано 6 мая, 2012 Спасибо. Всё работает. Цитата Ссылка на сообщение Поделиться на другие сайты
eldano Опубликовано 6 мая, 2012 Жалоба Поделиться Опубликовано 6 мая, 2012 А как реализовать sub-меню не в столбик, а в строку, через запятую? Цитата Ссылка на сообщение Поделиться на другие сайты
Kosjak76 Опубликовано 6 мая, 2012 Жалоба Поделиться Опубликовано 6 мая, 2012 Да через стили Цитата Ссылка на сообщение Поделиться на другие сайты
SergeyKH Опубликовано 7 мая, 2012 Жалоба Поделиться Опубликовано 7 мая, 2012 Окей. К примеру за сколько сможешь сделать меню как у http://www.5ok.com.ua ?Ну я не дизайнер и не пхп промер, поэтому не думаю, что смогу удовлетворить полностью все твои требования, но чисто скрипт+стили=$50.Там не так уж и сложно сделать это меню.Просто добавить третью вложенность,.ulsub width=100%,.lisub width=33% (если три колонки или 25% если четыре и т.д.)Ну как-то так. Цитата Ссылка на сообщение Поделиться на другие сайты
eldano Опубликовано 7 мая, 2012 Жалоба Поделиться Опубликовано 7 мая, 2012 "Kosjak76 " - дак вот через стили почему-то и не получается. Расторможусь-опять попробую. Цитата Ссылка на сообщение Поделиться на другие сайты
eldano Опубликовано 7 мая, 2012 Жалоба Поделиться Опубликовано 7 мая, 2012 "Kosjak76 " - получилось. Спасибо. Я о css что-то и не подумал. Цитата Ссылка на сообщение Поделиться на другие сайты
eldano Опубликовано 8 мая, 2012 Жалоба Поделиться Опубликовано 8 мая, 2012 Просто добавить третью вложенность - легко сказать. Цитата Ссылка на сообщение Поделиться на другие сайты
borsan Опубликовано 29 сентября, 2013 Жалоба Поделиться Опубликовано 29 сентября, 2013 Спасибо ! Цитата Ссылка на сообщение Поделиться на другие сайты
lexter Опубликовано 4 декабря, 2013 Жалоба Поделиться Опубликовано 4 декабря, 2013 Это в индекс <div id="catalog_menu"> {include file='categories.tpl' categories=$categories level=0} </div>Это в categories.tpl ?{if $categories} {if $level == 0}<ul class="ulcat"> {foreach item=c from=$categories} {if $c->subcategories} <li class="licat"> <a href="catalog/{$c->url}" class="acat">{$c->name}</a> {include file='categories.tpl' categories=$c->subcategories level=1}</li> {else} <li class="licat"> <a href="catalog/{$c->url}" class="acat">{$c->name}</a> </li> {/if} {/foreach} </ul>{/if} {if $level == 1}<ul class="ulsub"> {foreach item=c from=$categories} {if $c->subcategories} <li class="lisub"> <a href="catalog/{$c->url}" class="text-bold" class="asub">{$c->name}</a> {include file='categories.tpl' categories=$c->subcategories level=1} </li> {else} <li class="lisub"> <a href="catalog/{$c->url}" class="asub">{$c->name}</a> </li> {/if} {/foreach} </ul> {/if} {/if}Это в стили #catalog_menu{ margin:8px 0 0 5px; padding: 0; float: left; width: 100%; font-size:13px; } .ulcat { list-style: none; margin:0; padding:0; float: left; } .licat { background:url('../images/h-menu-pad-right.jpg') no-repeat top right, url('../images/h-menu-pad-left.jpg') no-repeat top left, url('../images/h-menu-pad-center.jpg') repeat-x top; float: left; position: relative; text-align:center; vertical-align:center; height:42px; width:120px; } .licat { -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; -khtml-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; } .acat { color:#ffffff; font-weight:bold; text-decoration: none; display: block; width: 110px; padding: 0px 5px; margin-top:5px; } .ulsub { float: left; background:#ffffff; border:2px solid #4AA93F; display: none; position: absolute; padding: 5px; width: 310px; z-index:99; margin-top:-12px; list-style: none; text-align:left; } .lisub { float: left; margin:0; padding:0; border:none; width:100%; background: none; border:none; } .asub { width: 300px; font-size:14px; text-align:left; color:#333333; border:none; text-decoration:none; padding:4px 10px; display: block; } .licat:hover, .licat.jshover { background:url('../images/h-menu-pad-sel-right.jpg') no-repeat top right, url('../images/h-menu-pad-sel-left.jpg') no-repeat top left, url('../images/h-menu-pad-sel-center.jpg') repeat-x top; } .licat:hover .acat, .licat.jshover .acat { color:#ffffff; } .licat:hover.asub, .licat.jshover.asub { } .licat:hover.asub:hover { color:#e84d07; } .lisub:hover, .lisub.jshover { background:#DDE7F3; border:none; } .licat:hover .ulsub, .licat.jshover .ulsub { display: block; }У меня работает, но тебе надо подобрать картинки фоновые, ну если хтмл как-то понимаешь то разберешься. Кстати, то же меню можно сделать и с обычной функцией. Максимальная вложенность меню = 2. Т.е. категории и подкатегории, а под-подкатегорий нет. Но сделать можно по примеру. Удачи.Спасибо большое пригодилось на двух сайтах!!! в одном подправил на вывод в 3 столбика ))) а собственно и править почти не чего было ))) и так выводило флоатом на новую строку ))) Цитата Ссылка на сообщение Поделиться на другие сайты
chubr Опубликовано 18 марта, 2014 Жалоба Поделиться Опубликовано 18 марта, 2014 Это в индекс <div id="catalog_menu"> {include file='categories.tpl' categories=$categories level=0} </div>Это в categories.tpl ?{if $categories} {if $level == 0}<ul class="ulcat"> {foreach item=c from=$categories} {if $c->subcategories} <li class="licat"> <a href="catalog/{$c->url}" class="acat">{$c->name}</a> {include file='categories.tpl' categories=$c->subcategories level=1}</li> {else} <li class="licat"> <a href="catalog/{$c->url}" class="acat">{$c->name}</a> </li> {/if} {/foreach} </ul>{/if} {if $level == 1}<ul class="ulsub"> {foreach item=c from=$categories} {if $c->subcategories} <li class="lisub"> <a href="catalog/{$c->url}" class="text-bold" class="asub">{$c->name}</a> {include file='categories.tpl' categories=$c->subcategories level=1} </li> {else} <li class="lisub"> <a href="catalog/{$c->url}" class="asub">{$c->name}</a> </li> {/if} {/foreach} </ul> {/if} {/if}Это в стили #catalog_menu{ margin:8px 0 0 5px; padding: 0; float: left; width: 100%; font-size:13px; } .ulcat { list-style: none; margin:0; padding:0; float: left; } .licat { background:url('../images/h-menu-pad-right.jpg') no-repeat top right, url('../images/h-menu-pad-left.jpg') no-repeat top left, url('../images/h-menu-pad-center.jpg') repeat-x top; float: left; position: relative; text-align:center; vertical-align:center; height:42px; width:120px; } .licat { -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; -khtml-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; } .acat { color:#ffffff; font-weight:bold; text-decoration: none; display: block; width: 110px; padding: 0px 5px; margin-top:5px; } .ulsub { float: left; background:#ffffff; border:2px solid #4AA93F; display: none; position: absolute; padding: 5px; width: 310px; z-index:99; margin-top:-12px; list-style: none; text-align:left; } .lisub { float: left; margin:0; padding:0; border:none; width:100%; background: none; border:none; } .asub { width: 300px; font-size:14px; text-align:left; color:#333333; border:none; text-decoration:none; padding:4px 10px; display: block; } .licat:hover, .licat.jshover { background:url('../images/h-menu-pad-sel-right.jpg') no-repeat top right, url('../images/h-menu-pad-sel-left.jpg') no-repeat top left, url('../images/h-menu-pad-sel-center.jpg') repeat-x top; } .licat:hover .acat, .licat.jshover .acat { color:#ffffff; } .licat:hover.asub, .licat.jshover.asub { } .licat:hover.asub:hover { color:#e84d07; } .lisub:hover, .lisub.jshover { background:#DDE7F3; border:none; } .licat:hover .ulsub, .licat.jshover .ulsub { display: block; }У меня работает, но тебе надо подобрать картинки фоновые, ну если хтмл как-то понимаешь то разберешься. Кстати, то же меню можно сделать и с обычной функцией. Максимальная вложенность меню = 2. Т.е. категории и подкатегории, а под-подкатегорий нет. Но сделать можно по примеру. Удачи. Подскажите, пожалуйста, куда здесь добавить {if $c->visible} чтобы выводились только активные категории?--------------Решение нашел Цитата Ссылка на сообщение Поделиться на другие сайты
chubr Опубликовано 23 марта, 2014 Жалоба Поделиться Опубликовано 23 марта, 2014 созрели вопросы: 1. Как сделать, чтобы подкатегория не показывалась, если там нет товара в наличии (если она пуста)?2. Как можно сделать цифру рядом с названием подкатегории с кол-во в ней товаров в наличии? Цитата Ссылка на сообщение Поделиться на другие сайты
Игорь 100 Опубликовано 26 мая, 2014 Жалоба Поделиться Опубликовано 26 мая, 2014 Всем привет! нужен специалист по симпле, переделка сайта(со старой версии на новую+дизайн+Модули и.т.д) Цитата Ссылка на сообщение Поделиться на другие сайты
nilg6666 Опубликовано 3 августа, 2014 Жалоба Поделиться Опубликовано 3 августа, 2014 сп все работает Цитата Ссылка на сообщение Поделиться на другие сайты
Vince Опубликовано 27 августа, 2014 Жалоба Поделиться Опубликовано 27 августа, 2014 А как сделать второй уровень такого типа меню http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/ вот под этот css в самом HTML? /* Основное меню */ .mega-menu{ font: bold 13px Arial, sans-serif; line-height: 16px; background: #333; border-left: 1px solid #1B1B1B; position: relative; /* Обязательно */ } .mega-menu li a { display: block; color: #fff; padding: 12px 38px 12px 25px; text-shadow: 1px 1px 1px #000; text-decoration: none; border-top: 1px solid #555; border-bottom: 1px solid #222; border-right: 1px solid #1B1B1B; } .mega-menu li a:hover, .mega-menu li.mega-hover a { background: #4b4b4b; color: #fff; border-right: 1px solid #4b4b4b; } .mega-menu li a.dc-mega { position: relative; } /* Стрелки основного меню */ .mega-menu li a .dc-mega-icon { display: block; position: absolute; top: 18px; right: 15px; width: 6px; height: 8px; background: url(../images/arrow_right.png) no-repeat 0 0; } /* Стили подменю */ .mega-menu li .sub-container { position: absolute; /* Обязательно */ background: #4B4B4B; padding: 10px 10px 0 10px; border: 1px solid #4b4b4b; border-left: none; } .mega-menu li .sub-container .sub {} .mega-menu li .sub .row { width: 100%; overflow: hidden; } .mega-menu li .sub li { float: none; width: 150px; font-size: 1em; font-weight: normal; } .mega-menu li .sub li.mega-hdr { float: left; /* Обязательно */ margin: 0 5px 10px 5px; } .mega-menu li .sub a, .mega-menu.left li .sub a { background: none; border: none; text-shadow: none; float: none; color: #fff; padding: 7px 10px; display: block; text-decoration: none; font-size: 0.9em; } .mega-menu li .sub li.mega-hdr a.mega-hdr-a { padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #E88221; text-transform: uppercase; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #333; } .mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover { color: #000; text-shadow: none; } .mega-menu .sub li.mega-hdr li a { padding: 4px 5px 4px 20px; background: url(../images/arrow_white.png) no-repeat 5px 8px; font-weight: normal; } .mega-menu .sub li.mega-hdr li a:hover { color: #a32403; background: #efefef url(../images/arrow_on.png) no-repeat 5px 8px; } .mega-menu .sub ul li { padding-right: 0; } /* Стили подменю второго уровня */ .mega-menu li .sub-container.non-mega .sub { padding: 10px;} .mega-menu li .sub-container.non-mega li { padding: 0; margin: 0; width: 150px; } .mega-menu li .sub-container.non-mega li a { padding: 7px 5px 7px 22px; background: url(../images/arrow_white.png) no-repeat 7px 10px; } .mega-menu li .sub-container.non-mega li a:hover { color: #a32403; background: #efefef url(../images/arrow_on.png) no-repeat 7px 10px; } Цитата Ссылка на сообщение Поделиться на другие сайты
Vince Опубликовано 27 августа, 2014 Жалоба Поделиться Опубликовано 27 августа, 2014 А как сделать второй уровень такого типа меню http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/ вот под этот css в самом HTML? /* Основное меню */ .mega-menu{ font: bold 13px Arial, sans-serif; line-height: 16px; background: #333; border-left: 1px solid #1B1B1B; position: relative; /* Обязательно */ } .mega-menu li a { display: block; color: #fff; padding: 12px 38px 12px 25px; text-shadow: 1px 1px 1px #000; text-decoration: none; border-top: 1px solid #555; border-bottom: 1px solid #222; border-right: 1px solid #1B1B1B; } .mega-menu li a:hover, .mega-menu li.mega-hover a { background: #4b4b4b; color: #fff; border-right: 1px solid #4b4b4b; } .mega-menu li a.dc-mega { position: relative; } /* Стрелки основного меню */ .mega-menu li a .dc-mega-icon { display: block; position: absolute; top: 18px; right: 15px; width: 6px; height: 8px; background: url(../images/arrow_right.png) no-repeat 0 0; } /* Стили подменю */ .mega-menu li .sub-container { position: absolute; /* Обязательно */ background: #4B4B4B; padding: 10px 10px 0 10px; border: 1px solid #4b4b4b; border-left: none; } .mega-menu li .sub-container .sub {} .mega-menu li .sub .row { width: 100%; overflow: hidden; } .mega-menu li .sub li { float: none; width: 150px; font-size: 1em; font-weight: normal; } .mega-menu li .sub li.mega-hdr { float: left; /* Обязательно */ margin: 0 5px 10px 5px; } .mega-menu li .sub a, .mega-menu.left li .sub a { background: none; border: none; text-shadow: none; float: none; color: #fff; padding: 7px 10px; display: block; text-decoration: none; font-size: 0.9em; } .mega-menu li .sub li.mega-hdr a.mega-hdr-a { padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #E88221; text-transform: uppercase; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #333; } .mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover { color: #000; text-shadow: none; } .mega-menu .sub li.mega-hdr li a { padding: 4px 5px 4px 20px; background: url(../images/arrow_white.png) no-repeat 5px 8px; font-weight: normal; } .mega-menu .sub li.mega-hdr li a:hover { color: #a32403; background: #efefef url(../images/arrow_on.png) no-repeat 5px 8px; } .mega-menu .sub ul li { padding-right: 0; } /* Стили подменю второго уровня */ .mega-menu li .sub-container.non-mega .sub { padding: 10px;} .mega-menu li .sub-container.non-mega li { padding: 0; margin: 0; width: 150px; } .mega-menu li .sub-container.non-mega li a { padding: 7px 5px 7px 22px; background: url(../images/arrow_white.png) no-repeat 7px 10px; } .mega-menu li .sub-container.non-mega li a:hover { color: #a32403; background: #efefef url(../images/arrow_on.png) no-repeat 7px 10px; } Вроде бы так добавил класс <a{categories_tree categories=$categories}class="sub-container"></a> Цитата Ссылка на сообщение Поделиться на другие сайты
Albinos4210 Опубликовано 1 апреля, 2016 Жалоба Поделиться Опубликовано 1 апреля, 2016 {if $categories} <ul id="mega-menu-6" class="mega-menu"> {foreach $categories as $cat} {if $cat->visible} <li> <a {if $category->id == $cat->id} class="selected"{/if} href="catalog/{$cat->url}" >{$cat->name}</a> {if $cat->subcategories} {* если есть subcategories *} <ul> {foreach $cat->subcategories as $sub} <li> <a {if $category->id == $sub->id} class="selected"{/if} href="catalog/{$sub->url}" >{$sub->name}</a> </li> {/foreach} <li> </li> </ul> {/if} </li> {/if} {/foreach} </ul> {/if} Подскажите пожалуйста как сделать что бы колонки были в столбик а не в строку. (разбить <ul> на 4 части) {if $level == 1 && ($c@iteration%10 == 0 && !$c@last)}нашел вот это Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.