Многоуровневое главное меню

[Einshtein]

Хотелось бы реализовать многоуровневое горизонтальное меню...

Пример можно увидеть на розетка.сом.юа

Категория первого уровня - штук 8, при наведении на меню в этой категории выпадает список подменю (категория 2го уровня) (желательно чтобы этот список был не в столбик, а в рядок - горизонтально.). И теперь под каждой категорией 2го уровня располагаются окончательные категории 3го уровня в столбик.

Например:

Искал инфу в инете - мало толковых идей...

Думаю это будет актуально для многих пользователей

использую Version 1.5.1.3

[ravilr]

ну как же нет инфы. Вот есть решение... но под ваши цели, еще и стиле по составлять надо.

так есть платное решение мега меню

[Einshtein]

спасибо стати помогли...вот только назрел другой вопрос :

Как убрать отображение количества товаров в этих категориях, которое отображается в скобках - напрягает очень...

гдето уже встречал эту темку, только щас фиг найду

[ravilr]

этих тем на сайте штук 10 есть. Поищите... через яндекс или гугл.

[Einshtein]

да, действительно нашел без проблем

Тут я столкнулся с другой траблой...реализовав меню 3го уровня в выпадающем меню я заметил что стили для 2го и 3го уровня присваиваются одинаковые...пол дня продолбался чтобы разделить их...и в силу недостатка знаний у меня это не очень хорошо вышло...Собсно я хотел присвоить отдельный стиль для меню 2го уровня (другой шрифт и цвет букв), а подменю последнего уровня оставить как есть...как не крутил - все стили присваиваются для обоих категорий одновременно.

И ещё одна проблема:

При наведении на главное горизонтальное меню - выпадают меню 2й и 3й категории в развернутом виде - всё как положено...но если я навожу мышкой на какую-нибудь категорию последнего уровня и после этого перевожу курсор на другое меню - оно сворачивается...Пробовал задавать position: static; fixed и т.д - не помогло...

будьте добры - дайте совет нубу :)

css прилагается

#menu {
height: 47px;
margin-bottom: 15px;
padding: 0px 5px;
background: #19830e;
background: -moz-linear-gradient(#19830e, #58ba3d);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #0C3),color-stop(1, #060));
background: -webkit-linear-gradient(#19830e, #58ba3d);
background: -o-linear-gradient(#19830e, #58ba3d);
background: -ms-linear-gradient(#19830e, #58ba3d);
background: linear-gradient(#1f9f2e, #19830e);
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 2px 2px #19830e;
-webkit-box-shadow: 0 2px 2px #19830e;
box-shadow: 0 2px 2px #19830e;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {


position: relative;
float: left;
z-index: 20;
height: 60px;
}
#menu > ul > li > a.active {
color: #fafafa;
display: run-in;
position: relative;
}
#menu > ul > li > a
/*#menu > ul > li > div > ul > li > a*/
{
color: #fff;
    display: block;
    font-size: 13px;
    font-weight: bold;
    line-height: 24px;
    padding: 12px 15px 11px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 0 #000000;
    text-transform: capitalize;
    z-index: 6;
border-left: 1px solid #444444;
    border-right: 1px solid #0C3;
}
#menu > ul > li:first-of-type a {
border-left:none;
}
#menu > ul > li:last-of-type a {
border-right:none;
}
#menu > ul > li > a:hover {
    color: #fff;
background: #0C3;
}
#menu ul > li:first-of-type a:hover {
background: none;
}
#menu ul> li:last-of-type a:hover {
background: none;
}
#menu > ul > li > div {
    margin-top: 2px;
    padding: 2px;
    display: none;
    position: absolute;
    z-index: 99999;
background: #58ba3d;
    background: -moz-linear-gradient(#19830e, #58ba3d);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #060),color-stop(1, #0C3));
    background: -webkit-linear-gradient(#19830e, #58ba3d);
    background: -o-linear-gradient(#19830e, #58ba3d);
    background: -ms-linear-gradient(#19830e, #58ba3d);
    background: linear-gradient(#1f9f2e, #19830e);
    -moz-border-radius: 3px;
    border-radius:3px;
-moz-box-shadow: 0 2px 3px #19830e;
    -webkit-box-shadow: 0 2px 3px #19830e;
	 box-shadow: 0 2px 3px #19830e;
 
}
#menu > ul > li > div > ul > li > div
{
display: block;
background: #FFFFFF;
position: static;
z-index: 5;
padding: 0px;
margin-rigt: 0px;
border: 0px solid #000000;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: url('../image/menu.png');
}
#menu > ul > li:hover > div,
#menu > ul > li:hover > div > ul > li:hover > div
{
  display: block;
}
#menu > ul > li > div > ul,
#menu > ul > li > div > ul > li > div > ul
{
  display: table-cell;
}

#menu > ul > li ul + ul,
#menu > ul > li ul > li ul + ul
{
  padding-left: 10px;
 
  
}

#menu > ul > li ul > li > a {
text-decoration: none;
padding: 9px;
color: #999999;
display: block;
white-space: nowrap;
min-width: 120px;
border-radius: 3px;
text-shadow: 0 1px 0 #000000;
    text-transform: capitalize;
font-size:12px;
font-family: Tahoma, Geneva, sans-serif;

}

#menu > ul > li ul > li > a:hover {
background: #0C3 !important;
background: -moz-linear-gradient(#090,  #0C3) !important;
background: -webkit-gradient(linear, left top, left bottom, from(#090), to(#0C3)) !important;
background: -webkit-linear-gradient(#090,  #0C3) !important;
background: -o-linear-gradient(#090,  #0C3) !important;
background: -ms-linear-gradient(#090,  #0C3) !important;
background: linear-gradient(#090,  #0C3) !important;
-moz-box-shadow: 0 10px #0C3;
-webkit-box-shadow: 0 1px #0C3;
box-shadow: 0 1px #0C3;
}
#menu > ul > li > div > ul > li > a,
#menu > ul > li > div > ul > li > div > ul > li > a
{
color: #FFF;
}

[Einshtein]

в общем до меня дошло почему закрывается меню 3го уровня если перевести мышку на другое меню...

Дело в том что меню 3го уровня работает по принципу как и меняю 2го уровня....если навести мышкой на главное меню - выпадает меню 2го уровня. Но если перевести мышку на другой пункт меню первого уровня то меню 2го уровня закрывается и открывается то меню на которое мы наводим мышкой...Такой же принцип у меню 3го уровня... Стоит мне перевести мышку на другой пункт 2го меню в раскрытом списке, как меню 3го уровня сворачивается и открывается тот пункт на который я навел курсором.

Запутал наверн.

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

Я так подозреваю что одним css тут не обойтись...наверн нужно делать правки в category.php ....вот только где?

Как отделить стили 2го уровня меню и 3го???

Люди хелп! 2й день мучаюсь

Скрины:

Открываю главное меню - выпадает список из категорий 2го уровня и подкатегорий

беспрепятственно дохожу до меню 3го уровня - ничё не закрывается не раскрывается как и должно быть.

Перехожу к другой категории 2го уровня и подменю которое было изначально раскрыто - сворачивается...

Как сделать так чтобы категория 3го уровня не сворачивалось?

[snastik]

это у тебя на локалке или есть интернете ?

если да то дай ссылку попробую посмотреть

[Yoda]

Нужно править еще и Javascript по ходу...

лучше не мучайся - напиши в платные услуги, кто то шарящий за недорого доправит.

[Einshtein]

есть в сети сайт...tmz com ua (не реклама, тем более там ищё ничё нет)

Та заплатить не проблема, тем более плачу не я, но есть две причины по которым я этого делать не спешу:

1) хочу научится, ибо если каждый раз платить - сам никогда не научусь

2) не охота лицом в грязь упасть перед начальством :)

[snastik]

да чтож вы с этой рекламой то ?

без ссылки как узнать то :-)

так что не переживайте

[snastik]

ну судя по всему там джаваскрипт надо править так как у рб2 поведение меню немного другое и скрипт это отрабатывает частично вы это выправили через цсс но при изменении ховер скрипт делает свою работу и меняет дисплей-блок на нон у элементов 3го уровня так что капайте в его направлении

[Einshtein]

спасибо попробую...хороший повод углубится в java

эмм а мож подскажете в каком конкретно .js искать? common.js ?

[Einshtein]

я так понимаю вот этот код

$('#menu ul li').hover(
  function() {
   $(this).addClass("active");
   $(this).find('ul').stop(true, true);
   $(this).find('ul').slideDown();
  },
   function() {
   $(this).removeClass("active");
   $(this).find('ul').slideUp('fast');
  });

[Einshtein]

гы удалил этот код - всё заработало)

Только вопрос с раздельными стилями для 2го и 3го уровня меню остаётся открытым...

Как мне сделать чтобы както выделить другим цветом и желательно нижним подчеркиванием меню 2го уровня?

[snastik]

пробуйте что то вида ul > li > ul > li a

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

[Einshtein]

только собрался написать что ничё не выходит - как получилось :) сёдня прям какаято фантастика!

Уважаемый snastik вышлите мне свою икону :)

А если серьёзно, то я в css коде, который выкладывал выше, разделил стили

#menu > ul > li > div > ul > li > a,
#menu > ul > li > div > ul > li > div > ul > li > a
{
color: #FFF;
}

на два разных

#menu > ul > li > div > ul > li > a,
{
color: #FFF;
font-size:15px;
}
#menu > ul > li > div > ul > li > div > ul > li > a
{
color: #FFF;
font-size:13px;
}

правда меня терзают смутные сомнения что гдето в коде выше лишние стили...абы оно валидно отображалось. Буду разбератсо

[snastik]

:-)

[Einshtein]

решил пойти дальше и впихнуть в категории выпадающего меню - картинки...

Пока топчусь на месте - может есть какенить идеи?

[snastik]

посмотри как строится запрос картинок в категории к примеру

[Einshtein]

у меня пока категории без картинок отображаются...паралельно работаю над этим

[snastik]

имелось ввиду картинок тех которые в самой категории там где ее описание

[Einshtein]

хм...чёт немогу вкурить в каком файле искать...catalogmodelcatalogcategory.php ?

или catalogviewthemedefaulttemplatemodulecategory.tpl ?

[snastik]

ну скорее всего надо и в контроллере и в тплке а потом в контроллере хидера добавить запрос картинки из модели категории и вывести уже в хидер.тпл как то так

[Einshtein]

походу вот оно catalogviewthemedefaulttemplateproductcategory.tpl

<div class="category-info">
	<?php if ($thumb) { ?>
	<div class="image"><img src="<?php echo $thumb; ?>" alt="<?php echo $heading_title; ?>" /></div>
	<?php } ?>
	<?php if ($description) { ?>
	<?php echo $description; ?>
	<?php } ?>
  </div>

терь надо придумать что с этим делать :)

[snastik]

ну теперь посмотри как создается в контроллере

<?php echo $thumb; ?>

потом посмотри в любом модуле как задается уменьшенная копия ну и потом собственно вставляй вывод в хидер