Усовершенствованный модуль категорий [Аккордион и прочее - the best ;) ] - страница 9 - [VM1] Модификации и хаки

Добрый день.
Модуль супер, только вот не хватает отображения в стиле выпадающего вправо/влево списка подкатегорий.
Подскажите пожалуйста как такое сделать.

css . Ищите по запросу "выпадающее меню на css". Разметка этого модуля идентична разметке модуля меню, кстати.

Доходчиво... Если бы ещё я не был нулём 
А модуль mainmenu я не использую. Может подскажите более конкретно? В стандартном модуле VirtueMart есть некий вариант jscook, который отображает выпадающий список, но он как-то топорно выглядит, да и работает так же... А ведь вертикальный выпадающий список, это самый удобный вариант отображения категорий, на мой взгляд конечно... Особенно когда много категорий и подкатегорий.

скажем вот первая попавшаяся статьия - http://www.webmascon.com/topics/coding/42a.asp . Вроде все доходчиво написано. вместо ul{бла бла бла} и li ul{bla bla} пишем ul.menu {bla blla} и ul.menu li ul{bla bla}.

danik.html

когда планируете "final" зарелизить?

Как можно заметить он не очень то заботится о том чтоб не повлиять на модули расположенные в сайдбарах... Нужно либо переделывать либо менять шаблон...

[/quote]

http://bike-street.ru
шаблон sunshine,
Разобрался, модуль не хочет дружить с резиновым шаблоном!

Помогите пожалуйста осилить эту проблему. Что нужно переделывать?

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

Даник, отличный модуль! Пытаюсь изменить шрифт аккордеона и добавить картинки к нему, по умолчанию всё просто в столбик сплошняком. По твоей инструкции правлю CSS файлы, но уже сломал голову ничего не изменяется. Подскажи пожалуйста куда конкретно вставлять указанный тобой код, чтобы изменить шрифт:

.menu .active{
    color: red;
}
.menu .current{
    text-decoration: undreline;
}

Видимо это не весь код, надо чтото еще к нему добавить, чтобы заработало или я вношу не в ту рубрику. Пытался вносить этот код во все CSS файлы моего шаблона по пути templates/шаблон/media/css. Наверное что-то надо довнести со знаком #... Короче я чайник, помоги пожалуйста, что с этим делать.

mrhuge, стили ты написал правильно. В какой файл добавить их  - не важно, главное чтобы этот файл был подключен к html-странице. Посмотри может ты добавил суффикс класса меню? Если у тебя аккордион, то если в параметрах не указан id списка, то подставляется accordion, так что попробуй писать #accordion .active{...}.
Если будет глухо - ставь FireBug - в таких делах незаменимая вещь (если у тя ff. если другой бравзер, то у них свои инструменты  есть)

Спасибо за быстрый ответ!

сделал #accordion .active{
    color: red;
}

вместо того что было раньше. Результата никакого.

Установил FireBug - навожу на менюшку аккордион, анализирую элемент, вылетает в левом окошке файрбага ul accordion и тп, в правом непонятно что за CSS. Что делать непонятно совсем - крыша съезжает ))) Будь другом, взгляни пожалуйста:

http://muzalliance.ru/

откровенно ступил...

#accordion .active a{
    color: red;
}
#accordion .current a{
    text-decoration: underline;
}

ща поправлю в шапке тоже... спасиб что на косяк указал)

Даник, кое-что заработало! Спасибо друг

И тебе помочь удалось  

Но вот только почему-то меняет шрифт на красный и подчеркнутый только после того как категория уже выбрана. А при первичном открытии сайта - модуль опять просто серый.

С файрбагом чуть разобрался - он в правом окне указывает из какого файла берется CSS. Туда надо лезть и править.

Твой модуль очень функциональный с возможностью фильтрации категорий, но геморрой ужасный вручную менять цвета, делать разметку, вставлять картинки. Для юзера, такого как я, не разбирающегося в CSS, практически нереально сделать красивую менюшку. Может есть у тебя какая-то дефолтная тема со шрифтами, разметкой, картинками для твоего модуля? Типа как например здесь сделано http://sportlife.dp.ua/

Если бы ты такую тему выложил бы в этом топике - твой модуль был бы просто ультимейт, и в том числе по простоте использования. Так как аналогов по функционалу в сети я не нашел.

Но вот только почему-то меняет шрифт на красный и подчеркнутый только после того как категория уже выбрана. А при первичном открытии сайта - модуль опять просто серый.

Ну все верно. А как должно по-твоему быть?

Так как аналогов по функционалу в сети я не нашел.

Собсно поэтому и сделал этот модуль)

Должно быть так, что при наведении на аккордеон, когда он раскрывается - раскрытые позиции должны сразу отличаться по шрифту, а то всё сливается в кучу.

mrhuge, целью небыло сделать красиво, целью было сделать функционально и качественно.
А css-красотульки подойдут те что уже в шаблоне вшиты, недаром дефолтный класс - menu, такой как в модуле mod_mainmenu. Заметь, в модуле нет ниодного файла CSS или js. При большом желании можно делать шаблоны модуля, впихивая в них CSS, и выкладывать тут, для общего пользования )

Ну правильно всё. Не могу только его подцепить к дефолтному классу меню. Задраился уже. Геморрой сплошной ) Не могу настроить просто чтоб выглядело хотябы как-то нормально, а не списком.

Ты снова прав. Нужно добавить класс expanded, который будет добавляться раскрытым пунктам...
Кстати в CSS классы можно комбинировать, например .expanded.active{активный да еще и раскрытый...}

Прикрепил новый accordion.php - попробуй его. указывай .expanded a{color: red} чтобы помечать красным развернутые пункты. кстати чтобы все не сливалось -сделай отступ подпунктам - #accordion ul{margin-left: 5px;}. также неплохо иногда сделать ссылки блочными - #accordion a{display: block;}

[вложение удалено Администратором]

mrhuge, рисуй в psd меню как тебе нравится - я те заверстаю. задаром естесственно

Даник, ты умница!

Всё отлично работает. Общий текст CSS куска стал таким:

#accordion .active a{
    color: red;
}
#accordion .current a{
    text-decoration: underline;
}
#accordion .expanded a{
    color: red;
}
#accordion ul{margin-left: 5px;}
#accordion a{display: block;}

Теперь и при наведении цвет меняется, и отступ появился. Все отлично.

Только не понял что значит "сделать ссылки блочными" - последняя строка кода. Визуально ничего не меняется при вставке этого пункта.

С твоей помощью уже практически функционально всё только надо только добавить картинки какиенить под менюшки и категории, ну типа плюсик чтоб открывалось и минусик чтоб закрывалось. Как я понимаю - это ты уже задарма делаешь

Ну и можно вставить еще тот кусок кода, который ты где-то в этой теме писал, чтобы аккордеон открывался не при наведении а при нажатии.

Совершенно гениальный у тебя модуль! ))

Сделал как ты написал тут http://joomlaforum.ru/index.php/topic,109669.msg689038.html#msg689038

И прекрасно появились красные квадратики при нажатии на которые раскрывается аккордеон! Супер!

Единственно ты говоришь, что нужно удалить этот код:

               element.index = index;
               element.getChildren().filterByTag('a')[0].addEvent('mouseover', function(){
                  if (this.getNext().offsetHeight == 0) {
                     accTimer = this.parentNode.parentNode.Accordion.display.delay(200, this.parentNode.parentNode.Accordion, $(this.parentNode).index);
                  }
               });
               element.getChildren().filterByTag('a')[0].addEvent('mouseout', function(){
                  if((accTimer != undefined)){clearTimeout(accTimer)};
               });

Но в твоем аккордеоне код такой:

               element.index = index;
               element.addEvent('mouseover', function(){
                  if (this.getChildren().filterByTag('ul')[0].offsetHeight == 0) {
                     accTimer = this.parentNode.Accordion.display.delay(200, this.parentNode.Accordion, $(this).index);
                  }
               });
               element.addEvent('mouseout', function(){
                  if((accTimer != undefined)){clearTimeout(accTimer)};
               });

Ты чтото подправил видимо. Как я понял удалить нужно код из последней цитаты.

Даник, блин слушай сделал всё, а главная менюшка вверху сбилась и стала с красными квадратами. Как отделить по стилю главную менюшку от аккордеона?

Аа разобрался - надо просто ".menu" заменить на "#accordion"

Круто! 

Еще бы только сделать не кубик чтобы при нажатии раскрывалось, а плюсик.

нарисуй плюсик в фотошопе (или пэйнте) и сделай фоном кубика:
background: url(../images/plus.png) no-repeat;

еще можно сделать чтоб он менялся на минус:
#accordion li.expanded span(или как там не помню уже){
    background: url(../images/minus.png) no-repeat;
}
#accordion li span(или как там не помню уже){
    background: url(../images/plus.png) no-repeat;
}

только лучше засунуть и плюс и минус в одну катринку, и менять не путь к изображению а позицию:

#accordion li.expanded span(или как там не помню уже){
    background: url(../images/toggler.sprite.png) no-repeat 100% 0;
}
#accordion li span(или как там не помню уже){
    background: url(../images/toggler.sprite.png) no-repeat 0 0;
}

Текс сижу пробую: сделал только open.png и closed.png вместо плюс и минус.

Вот общий код этого раздела:

#accordion .active a{
    color: blue;
}
#accordion .current a{
    text-decoration: underline;
}
#accordion .expanded a{
    color: blue;
}
#accordion ul{margin-left: 5px;}
#accordion a{display: block; }

#accordion li{
    position: relative;
}
#accordion li a{
    display: block;

    border-top: 1px solid #ccc;
    position: relative;
}
#accordion li span{
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background: blue;
    right: 5px;
    top: 5px;
}
#accordion li li a{
    border: none;
}

Так куда именно вставить  "background: url(../images/closed.png) no-repeat;", чтобы сделать его фоном кубика?
Я чтото везде повставлял - стрелочка или слева выводится прямо на тексте или кубик просто пропадает справа.

А это что вообще?

#accordion li.expanded span(или как там не помню уже)

совсем не понял что подставлять под "или как там не помню уже"

Даник, нашел еще глюк:

когда я активировал второй такой же модуль с такими же параметрами и по двум модулях разнёс товары по группам http://muzalliance.ru/, второй модуль показывается всегда раскрытым и без опции открыть/закрыть

вот это правило влияет на кубик-тоглер:
#accordion li span{
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background: blue;
    right: 5px;
    top: 5px;
}
тоесть память не подвела )
background: blue; - вот задается фон, щас голубой. вставь вместо него background: url(../images/closed.png) no-repeat;

и #accordion li.expanded span{
    background: url(../images/closed.png) no-repeat;
}

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

Сделал, но что-то не то, png-шки не отображаются совсем. Вот код:

#accordion .active a{
    color: blue;
}

#accordion .current a{
    text-decoration: underline;
}

#accordion .expanded a{
    color: blue;
}

#accordion ul{margin-left: 5px;}

#accordion a{display: block; }

#accordion li{
    position: relative;
}

#accordion li a{
    display: block;
    border-top: 1px solid #ccc;
    position: relative;
}

#accordion li span{
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background: url(../images/closed.png) no-repeat;
    right: 5px;
    top: 5px;
}

#accordion li.expanded span{
    background: url(../images/closed.png) no-repeat;
}

#accordion li li a{
    border: none;
}

Даник, нашел еще глюк...

ыыы, ща допишем в шапочку, что второй модуль с тем же layout'ом должен иметь прописанный в параметрах уникальный идентификатор (id)

у тебя картинка имеет пустые белые поля, кадрируй ее в фотошопе. а пока можешь прописать такие стили:

#accordion li span {
background:url("/templates/kraftwerks/media/images/closed.png") no-repeat -9px -9px ;
    display:block;
    height:12px;
    position:absolute;
    right:5px;
    top:4px;
    width:10px;
}
#accordion li.expanded span {
    background:url("/templates/kraftwerks/media/images/closed.png") no-repeat -9px -9px transparent;
}

Текс, если под кадрированием ты подразумевал обрезать картинку, то в принципе после вставки твоего последнего кода всё итак заработало. Отлично!

По поводу id - ты имеешь ввиду что надо в расширенных настройках модуля выставить "Id списка тега" для каждого модуля? Я так попробовал - выставил id списка тега "1" и "2" и настройки CSS все кудато испарились - надо теперь еще чтото доработать. Надо наверное для второго модуля теперь еще одни CSS-ки прописать.

Серьезный у нас бета-тестинг