Перейти к содержимому


Как Сделать ,чтобы При Наведении Мышкой,на Категорию,раскладывалось На Производителей?


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 72

#1 spirit137

spirit137

    Пользователь

  • Пользователи
  • PipPip
  • 35 сообщений

Отправлено 08 Апрель 2013 - 21:08

как сделать ,чтобы при наведении мышкой,на категорию,раскладывалось на производителей?для примера  http://avtodesant.ru/

#2 mikola

mikola

    Good soo good

  • Модератоpы
  • 1 550 сообщений
  • Городгород Нижний Новгород

Отправлено 08 Апрель 2013 - 21:29

Просмотр сообщенияspirit137 (08 Апрель 2013 - 21:08) писал:

как сделать ,чтобы при наведении мышкой,на категорию,раскладывалось на производителей?для примера  http://avtodesant.ru/
В принципе это сделать можно с помощью каталога категорий выводимых вместо массива "catalog" массивом "catalog_full". Он содержит полное дерево категорий, без скрытия вложенных в не активную ветку категорий, что позволяет делать любые древовидные струкруры категорий, в том числе и выпадающие списки как в примере с mvideo. Код построения дерева категорий мы построим в 3 шага.
Шаг первый. 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 spirit137

spirit137

    Пользователь

  • Пользователи
  • PipPip
  • 35 сообщений

Отправлено 08 Апрель 2013 - 21:41

Да... попробую на досуге.Разберусь только с слайдером.Спасибо!

#4 sotil

sotil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 27 Август 2014 - 13:04

Это , практически то что надо.
Помогите настроить такой каталог для сияния
Я установил, в представленном выше, виде, тенденция нужная, и всё же сам отрихтовать не смогу

#5 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 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 sotil

sotil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 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 Dars

Dars

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 410 сообщений

Отправлено 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;}
Все изменения на сайте
Пока всё) Спасибо!
1. В main.css найдите строку:

#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 sotil

sotil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 28 Август 2014 - 22:17

Просмотр сообщенияDars (28 Август 2014 - 12:43) писал:

1. В main.css найдите строку:

#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) писал:

1 надо перевернуть меню, чтобы всплывало влево относительно правого каталога
2 Проявились скрытые категории, их надо убрать
3 Надо чтобы верхний край всплывающего меню находился вровень с верхним краем категории, например всплывающее меню может быть с заголовком категории
Всё таки хочется увидеть заголовок всплывающего меню
4 Хотелось бы чтобы при нажатии на категорию, в дереве отражались доступные подкатегории и т.д. (как это было раньше)
Имею ввиду, чтобы доступные подкатегории появлялись в дереве каталога, после клика по выбранной категории(подкатегории)
5 Чтобы в случае большого количества подкатегорий, всплывающее меню можно было прокручивать к низу (например ПО БРЕНДАМ)
Получилось неинтересно, получился блок одинаковый для всех категорий, некрасиво! И третья вложенность не появляется.
Надо как-то придумать как можно дать пользователю возможность увидеть всё. Сейчас получается, что всплывающее меню доходит до нижнего края страницы и обрывается (см изображение Меню) , только на достаточно длинной странице меню умещается, при этом список брендов будет постоянно пополнятся, данная проблема касается только брендов, может категорию брендов отдельно вынести и сделать как на прикреплённом изображении
6 Что такое : /* Видимое меню */
7 Для того чтобы попасть на всплывающее меню мышкой, надо тренироваться, очень быстро исчезает, можно как то с этим справиться, может имеет смысл пододвинуть вплотную к основному меню

Прикрепленные изображения

  • меню.png
  • Предложение по брендам.png


#9 sotil

sotil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 28 Август 2014 - 22:47

Ещё вопрос, почему изменения вносимые в 1 ую вложенность , отражаются и на других вложенностях.? И как этого избежать?

#10 sotil

sotil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 29 Август 2014 - 12:21

Почему-то увеличился подвал сайта, надо обратно вернуть в исходное

#11 Alekseys

Alekseys

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 29 Август 2014 - 13:51

Просмотр сообщенияsotil (29 Август 2014 - 12:21) писал:

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

#12 sotil

sotil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 29 Август 2014 - 20:08

Просмотр сообщенияAlekseys (29 Август 2014 - 13:51) писал:

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

#13 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 30 Август 2014 - 00:56

у вас слишком много подкатегорий в выпадающем каталоге в main.css добавьте:
.categories > #nav > li > ul {
	height: 400px;
	overflow-y: scroll;
}


#14 sotil

sotil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 30 Август 2014 - 06:28

Просмотр сообщенияVaccina (30 Август 2014 - 00:56) писал:

у вас слишком много подкатегорий в выпадающем каталоге в main.css добавьте:
.categories > #nav > li > ul {
height: 400px;
overflow-y: scroll;
}
Этот вариант уже пробовали, не нравится, как я писал ранее.
Может можно прописать только для категории бренды, она длинная, Я писал об этом читайте предыдущие сообщения.

Просмотр сообщенияsotil (28 Август 2014 - 22:17) писал:

1 надо перевернуть меню, чтобы всплывало влево относительно правого каталога
2 Проявились скрытые категории, их надо убрать
3 Надо чтобы верхний край всплывающего меню находился вровень с верхним краем категории, например всплывающее меню может быть с заголовком категории
Всё таки хочется увидеть заголовок всплывающего меню
4 Хотелось бы чтобы при нажатии на категорию, в дереве отражались доступные подкатегории и т.д. (как это было раньше)
Имею ввиду, чтобы доступные подкатегории появлялись в дереве каталога, после клика по выбранной категории(подкатегории)
5 Чтобы в случае большого количества подкатегорий, всплывающее меню можно было прокручивать к низу (например ПО БРЕНДАМ)
Получилось неинтересно, получился блок одинаковый для всех категорий, некрасиво! И третья вложенность не появляется.
Надо как-то придумать как можно дать пользователю возможность увидеть всё. Сейчас получается, что всплывающее меню доходит до нижнего края страницы и обрывается (см изображение Меню) , только на достаточно длинной странице меню умещается, при этом список брендов будет постоянно пополнятся, данная проблема касается только брендов, может категорию брендов отдельно вынести и сделать как на прикреплённом изображении
6 Что такое : /* Видимое меню */
7 Для того чтобы попасть на всплывающее меню мышкой, надо тренироваться, очень быстро исчезает, можно как то с этим справиться, может имеет смысл пододвинуть вплотную к основному меню

и

Просмотр сообщенияsotil (28 Август 2014 - 22:47) писал:

Ещё вопрос, почему изменения вносимые в 1 ую вложенность , отражаются и на других вложенностях.? И как этого избежать?

Прикрепленные изображения

  • Предложение по брендам.png
  • меню.png


#15 sotil

sotil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 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 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 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 sotil

sotil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 02 Сентябрь 2014 - 06:47

#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 > */
С этим что делать и для чего эти коды?


Что писать под этим кодом?
.categories > #nav > li > ul > li > a{
здесь пишем стили для второго уровня вложенности
}
Как писать третью и четвёртую вложенность?

#18 sotil

sotil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 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 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 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 sotil

sotil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 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 анонимных