Как Сделать ,чтобы При Наведении Мышкой,на Категорию,раскладывалось На Производителей?
#1
Отправлено 08 Апрель 2013 - 21:08
#2
Отправлено 08 Апрель 2013 - 21:29
spirit137 (08 Апрель 2013 - 21:08) писал:
Шаг первый. HTML код
<!-- Каталог товаров --> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul id="nav">{% ENDIF %} <li class=" level{catalog_full.LEVEL} nav-{catalog_full.index} {% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} "> <a href="{catalog_full.URL}"><span>{catalog_full.NAME}</span></a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {%ENDFOR%} {%ENDIF%} <!-- /Каталог товаров -->Это код можно будет больше никогда не трогать, подойдет для любых дизайн шаблонов.
Шаг второй. JS код
Как только допишете вот такой javascript код например в файл main.js:
$(document).ready(function(){ // Действие при наведении на меню категорий, для возможности отображения вложенного подменю $('#nav li').hover( function () { $(this).addClass('over'); }, function () { $(this).removeClass('over'); } ); });
К категориям на которые Вы наводите начнёт дописываться специальный стиль, который позволит отображать вложенные категорий в ту на которую навели курсор. При уходе мышки с этой категории соответственно этот стиль будет убираться и её можно будет легко скрыть.
Шаг третий. CSS стили
Остался один финальный шаг, который будет самым легко настраиваемым. Подобными стилями можно скрыть все вложенные в корневые категории и настроить вид отображения как захочется. Хоть боковым меню, хоть нижним, хоть верхним.
Вот пример CSS стилей для размещения вышеуказанного меню слева на сайте и выдачи списка подкатегорий при наведении на категорию. Вложенность сами понимаете не ограниченная:
#nav{padding:0 0 32px 7px; margin:0; font-size:20px;}/* Все уровни */ #nav li { text-align:left; position:relative; } #nav li.over { z-index:999; } #nav li.parent {} #nav li a { display:block; text-decoration:none; } #nav li a:hover { text-decoration:none; } #nav li a span { display:block; white-space:nowrap; cursor:pointer; } #nav li ul a span { white-space:normal; } /* 1й уровень вложенности */ #nav li {} #nav li a{padding:0 0 0; font-weight:bold; color:#CDCDCD; line-height:normal;} #nav li a:hover { color:#333333; } #nav li.over a, #nav li.active a { color:#333333; } /* 2й уровень вложенности */ #nav ul { position:absolute; width:15em; top:0px; left:-10000px; border:0; padding:0; background:#B2B2B2; font-size:12px;} #nav ul li { float:none; border-bottom:1px solid #FFF; } #nav ul li.last { border-bottom:0; } #nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#050505 !important; } #nav ul li a:hover { color:#FFF !important; background:#333333; } #nav ul li.active a, #nav ul li.over a { color:#FFF !important; background:#333333; } /* 3й и последующие уровни... Можно писать таких стилей сколько угодно, до бесконечности... */ #nav ul ul { top:0px; } /* Видимое меню */ #nav li.over ul { left:200px; } #nav li.over ul li.over ul { left:15em; } #nav li.over ul ul { left:-10000px; } #nav li.over .indent-class{margin-left:230px;} /********** Navigation > */
#3
Отправлено 08 Апрель 2013 - 21:41
#5
Отправлено 27 Август 2014 - 22:49
код выше подходит для вашей темы, в HTML необходимо изменить:
<ul> {%IFNOT catalog_empty %} {% FOR catalog %} {% IFNOT catalog.HIDE %} <li class="cat-item"> <a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %} class="level{catalog.LEVEL} nav-{catalog.index} {% IF catalog.CURRENT %}selected{% ELSEIF catalog.CURRENT_PARENT %}active{% ENDIF %} {% IF catalog.ISSET_SUB %}parent{% ENDIF %}">{catalog.NAME}</a> </li> {% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul>на структуру указанную выше, в остальном необходимо просто добавить код в необходимые файлы
#6
Отправлено 28 Август 2014 - 11:57
Vaccina (27 Август 2014 - 22:49) писал:
код выше подходит для вашей темы, в HTML необходимо изменить:
<ul> {%IFNOT catalog_empty %} {% FOR catalog %} {% IFNOT catalog.HIDE %} <li class="cat-item"> <a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %} class="level{catalog.LEVEL} nav-{catalog.index} {% IF catalog.CURRENT %}selected{% ELSEIF catalog.CURRENT_PARENT %}active{% ENDIF %} {% IF catalog.ISSET_SUB %}parent{% ENDIF %}">{catalog.NAME}</a> </li> {% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul>на структуру указанную выше, в остальном необходимо просто добавить код в необходимые файлы
Сделал.
1 надо перевернуть меню, чтобы всплывало влево относительно правого каталога
2 Проявились скрытые категории, их надо убрать
3 Надо чтобы верхний край всплывающего меню находился вровень с верхним краем категории, например всплывающее меню может быть с заголовком категории
4 Хотелось бы чтобы при нажатии на категорию, в дереве отражались доступные подкатегории и т.д. (как это было раньше)
5 Чтобы в случае большого количества подкатегорий, всплывающее меню можно было прокручивать к низу (например ПО БРЕНДАМ)
6 Что такое : /* Видимое меню */
#nav li.over ul { left:200px; }
#nav li.over ul li.over ul { left:15em; }
#nav li.over ul ul { left:-10000px; }
#nav li.over .indent-class{margin-left:230px;}
Все изменения на сайте
Пока всё) Спасибо!
#7
Отправлено 28 Август 2014 - 12:43
sotil (28 Август 2014 - 11:57) писал:
1 надо перевернуть меню, чтобы всплывало влево относительно правого каталога
2 Проявились скрытые категории, их надо убрать
3 Надо чтобы верхний край всплывающего меню находился вровень с верхним краем категории, например всплывающее меню может быть с заголовком категории
4 Хотелось бы чтобы при нажатии на категорию, в дереве отражались доступные подкатегории и т.д. (как это было раньше)
5 Чтобы в случае большого количества подкатегорий, всплывающее меню можно было прокручивать к низу (например ПО БРЕНДАМ)
6 Что такое : /* Видимое меню */
#nav li.over ul { left:200px; }
#nav li.over ul li.over ul { left:15em; }
#nav li.over ul ul { left:-10000px; }
#nav li.over .indent-class{margin-left:230px;}
Все изменения на сайте
Пока всё) Спасибо!
#nav li.over ul { left:200px; }
и замените её на:
#nav li.over ul { left:-200px; }
2. В шаблоне HTML найдите строку:
<li class="
и замените её на:
<li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="
3. В main.css найдите строку:
#nav ul { position:absolute; width:15em; top:0; left:-10000px; border:0; padding:0; background:#B2B2B2; font-size:12px;}
и замените её на:
#nav ul { position:absolute; width:15em; top:-20px; left:-10000px; border:0; padding:0; background:#B2B2B2; font-size:12px;}
Можете сами менять значение top, чтобы двигать вплывающее меню по вертикали.
4. Если я вас правильно понял - всё так и есть. Например, при нажатии на категорию "ПО БРЕНДАМ" отображаются подкатегории брендов.
5. Найдите в main.css строку:
#nav ul { position:absolute; width:15em; top:0px; left:-10000px; border:0; padding:0; background:#B2B2B2; font-size:12px;}
и замените её на:
#nav ul { position:absolute; width:15em; top:0px; left:-10000px; border:0; padding:0; background:#B2B2B2; font-size:12px; height:200px; overflow:auto;}
6. Параметры отображения категорий всплывающего меню.
#8
Отправлено 28 Август 2014 - 22:17
Dars (28 Август 2014 - 12:43) писал:
#nav li.over ul { left:200px; }
и замените её на:
#nav li.over ul { left:-200px; }
2. В шаблоне HTML найдите строку:
<li class="
и замените её на:
<li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="
3. В main.css найдите строку:
#nav ul { position:absolute; width:15em; top:0; left:-10000px; border:0; padding:0; background:#B2B2B2; font-size:12px;}
и замените её на:
#nav ul { position:absolute; width:15em; top:-20px; left:-10000px; border:0; padding:0; background:#B2B2B2; font-size:12px;}
Можете сами менять значение top, чтобы двигать вплывающее меню по вертикали.
4. Если я вас правильно понял - всё так и есть. Например, при нажатии на категорию "ПО БРЕНДАМ" отображаются подкатегории брендов.
5. Найдите в main.css строку:
#nav ul { position:absolute; width:15em; top:0px; left:-10000px; border:0; padding:0; background:#B2B2B2; font-size:12px;}
и замените её на:
#nav ul { position:absolute; width:15em; top:0px; left:-10000px; border:0; padding:0; background:#B2B2B2; font-size:12px; height:200px; overflow:auto;}
6. Параметры отображения категорий всплывающего меню.
Dars (28 Август 2014 - 12:43) писал:
2 Проявились скрытые категории, их надо убрать
3 Надо чтобы верхний край всплывающего меню находился вровень с верхним краем категории, например всплывающее меню может быть с заголовком категории
Всё таки хочется увидеть заголовок всплывающего меню
4 Хотелось бы чтобы при нажатии на категорию, в дереве отражались доступные подкатегории и т.д. (как это было раньше)
Имею ввиду, чтобы доступные подкатегории появлялись в дереве каталога, после клика по выбранной категории(подкатегории)
5 Чтобы в случае большого количества подкатегорий, всплывающее меню можно было прокручивать к низу (например ПО БРЕНДАМ)
Получилось неинтересно, получился блок одинаковый для всех категорий, некрасиво! И третья вложенность не появляется.
Надо как-то придумать как можно дать пользователю возможность увидеть всё. Сейчас получается, что всплывающее меню доходит до нижнего края страницы и обрывается (см изображение Меню) , только на достаточно длинной странице меню умещается, при этом список брендов будет постоянно пополнятся, данная проблема касается только брендов, может категорию брендов отдельно вынести и сделать как на прикреплённом изображении
6 Что такое : /* Видимое меню */
7 Для того чтобы попасть на всплывающее меню мышкой, надо тренироваться, очень быстро исчезает, можно как то с этим справиться, может имеет смысл пододвинуть вплотную к основному меню
#9
Отправлено 28 Август 2014 - 22:47
#10
Отправлено 29 Август 2014 - 12:21
#12
Отправлено 29 Август 2014 - 20:08
Alekseys (29 Август 2014 - 13:51) писал:
#13
Отправлено 30 Август 2014 - 00:56
.categories > #nav > li > ul { height: 400px; overflow-y: scroll; }
#14
Отправлено 30 Август 2014 - 06:28
Vaccina (30 Август 2014 - 00:56) писал:
.categories > #nav > li > ul { height: 400px; overflow-y: scroll; }
Может можно прописать только для категории бренды, она длинная, Я писал об этом читайте предыдущие сообщения.
sotil (28 Август 2014 - 22:17) писал:
2 Проявились скрытые категории, их надо убрать
3 Надо чтобы верхний край всплывающего меню находился вровень с верхним краем категории, например всплывающее меню может быть с заголовком категории
Всё таки хочется увидеть заголовок всплывающего меню
4 Хотелось бы чтобы при нажатии на категорию, в дереве отражались доступные подкатегории и т.д. (как это было раньше)
Имею ввиду, чтобы доступные подкатегории появлялись в дереве каталога, после клика по выбранной категории(подкатегории)
5 Чтобы в случае большого количества подкатегорий, всплывающее меню можно было прокручивать к низу (например ПО БРЕНДАМ)
Получилось неинтересно, получился блок одинаковый для всех категорий, некрасиво! И третья вложенность не появляется.
Надо как-то придумать как можно дать пользователю возможность увидеть всё. Сейчас получается, что всплывающее меню доходит до нижнего края страницы и обрывается (см изображение Меню) , только на достаточно длинной странице меню умещается, при этом список брендов будет постоянно пополнятся, данная проблема касается только брендов, может категорию брендов отдельно вынести и сделать как на прикреплённом изображении
6 Что такое : /* Видимое меню */
7 Для того чтобы попасть на всплывающее меню мышкой, надо тренироваться, очень быстро исчезает, можно как то с этим справиться, может имеет смысл пододвинуть вплотную к основному меню
и
sotil (28 Август 2014 - 22:47) писал:
#15
Отправлено 30 Август 2014 - 13:04
Подскажите как избежать, чтобы изменения стилей в этом коде:
#nav li.active a {color:#626262; font-weight:bold; background:#f4f4f4; border-radius: 0 50px 50px 0;}
не влияли на:
#nav li a:hover {color:#ff0303; background:#f4f4f4; border-radius: 0 50px 50px 0; font-weight:bold;}
и
второй уровень вложенности.
Хотелось бы применить индивидуальные стили для разных уровней вложенности и самих действий в уровнях.
#16
Отправлено 02 Сентябрь 2014 - 03:01
#nav li a:hover {color:#ff0303; background:#f4f4f4; border-radius: 0 50px 50px 0; font-weight:bold;}расположить ниже:
#nav li.active a {color:#626262; font-weight:bold; background:#f4f4f4; border-radius: 0 50px 50px 0;}
добавляете:
.categories > #nav > li > ul > li > a{ здесь пишем стили для второго уровня вложенности }немного видоизменяем блок если это необходимо
#17
Отправлено 02 Сентябрь 2014 - 06:47
#nav li { text-align:left; position:relative; }
#nav li.over { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a:hover { text-decoration:none; }
#nav li a span { display:block; white-space:nowrap; cursor:pointer; }
#nav li ul a span { white-space:normal; }
/* 1й уровень вложенности */
#nav li {}
#nav li a{padding:0 0 0; font-weight:bold; color:#CDCDCD; line-height:normal;}
#nav li a:hover { color:#333333; }
#nav li.over a,
#nav li.active a { color:#333333; }
/* 2й уровень вложенности */
#nav ul { position:absolute; width:15em; top:0px; left:-10000px; border:0; padding:0; background:#B2B2B2; font-size:12px;}
#nav ul li { float:none; border-bottom:1px solid #FFF; }
#nav ul li.last { border-bottom:0; }
#nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#050505 !important; }
#nav ul li a:hover { color:#FFF !important; background:#333333; }
#nav ul li.active a,
#nav ul li.over a { color:#FFF !important; background:#333333; }
/* 3й и последующие уровни... Можно писать таких стилей сколько угодно, до бесконечности... */
#nav ul ul { top:0px; }
/* Видимое меню */
#nav li.over ul { left:200px; }
#nav li.over ul li.over ul { left:15em; }
#nav li.over ul ul { left:-10000px; }
#nav li.over .indent-class{margin-left:230px;}
/********** Navigation > */
С этим что делать и для чего эти коды?
Что писать под этим кодом?
.categories > #nav > li > ul > li > a{
здесь пишем стили для второго уровня вложенности
}
Как писать третью и четвёртую вложенность?
#18
Отправлено 02 Сентябрь 2014 - 22:04
Изменения в этом коде
#nav li.active a {color:#fff; background:#626262;font-weight:bold; padding-left: 1px;}Влияют на этот
#nav li a:hover {color:#626262; background:#f4f4f4; font-weight:bold;border-radius:0 15px 15px 0;}А изменения в этом коде, влияют на вторую вложенность
#19
Отправлено 03 Сентябрь 2014 - 02:20
Цитата
.categories > #nav > li > ul > li > a{
здесь пишем стили для второго уровня вложенности
}
не под ним, а в нем прописываете необходимые вам стили для вложенности
Цитата
#nav .level1 a{ стили }
для 3 и 4го уровня удлиняем селектор, пример:
.categories > #nav > li > ul > li > ul > li > a { }или:
#nav .level2 a{ стили }
#nav li.active a {color:#fff; background:#626262;font-weight:bold; padding-left: 1px;}попробуйте заменить на:
#nav li.level0.active a {color:#fff; background:#626262;font-weight:bold; padding-left: 1px;}
#20
Отправлено 03 Сентябрь 2014 - 21:47
Vaccina (03 Сентябрь 2014 - 02:20) писал:
можно укоротить код, использовав следующий:
#nav .level1 a{ стили }
для 3 и 4го уровня удлиняем селектор, пример:
.categories > #nav > li > ul > li > ul > li > a { }или:
#nav .level2 a{ стили }
#nav li.active a {color:#fff; background:#626262;font-weight:bold; padding-left: 1px;}попробуйте заменить на:
#nav li.level0.active a {color:#fff; background:#626262;font-weight:bold; padding-left: 1px;}
Не понял ничего, нужен пример уровня со стилями, то что сделал я сохранять не стал.
То что предложено к замене - не помогло.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных