Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

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

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

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

Например:

Изображение

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

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

использую Version 1.5.1.3

Надіслати
Поділитися на інших сайтах


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

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

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

Надіслати
Поділитися на інших сайтах


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

Тут я столкнулся с другой траблой...реализовав меню 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;
}
Надіслати
Поділитися на інших сайтах


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

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

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

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

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

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

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

Скрины:

Изображение

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

Изображение

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

Изображение

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

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

Надіслати
Поділитися на інших сайтах


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

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

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

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

Надіслати
Поділитися на інших сайтах


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

  • +1 1
Надіслати
Поділитися на інших сайтах

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

$('#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');
  });
Надіслати
Поділитися на інших сайтах


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

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

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

Надіслати
Поділитися на інших сайтах


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

Уважаемый 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;
}
правда меня терзают смутные сомнения что гдето в коде выше лишние стили...абы оно валидно отображалось. Буду разбератсо
Надіслати
Поділитися на інших сайтах


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

Надіслати
Поділитися на інших сайтах

походу вот оно 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>
терь надо придумать что с этим делать :)
Надіслати
Поділитися на інших сайтах


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

<?php echo $thumb; ?>

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

  • +1 1
Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.