Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

0

Выпадающий Каталог Как На Сайте Мвидео

Автор Navihome_ru, 18 июля 2013 22:00

Авторизуйтесь для ответа в теме

Сообщений в теме: 5

#1 Navihome_ru

Продвинутый пользователь

Пользователи
94 сообщений

ГородМосква

Отправлено 18 Июль 2013 - 22:00

Помогите сделать такое выпадающее меню. но не сразу, а только когда человек находится в какой то из категорий.
т.е на главной странице обычный открытый каталог. как только человек переходит в какую либо категорию, каталог сворачивается, а вместо него остается фильтр по товарам. но при наведении на каталог , он либо поверх открывается либо сдвигая фильтр вниз. Спасибо

http://www.mvideo.ru.../lvl_1/class_1/

сайт: navihome.ru

Наверх

#2 sengun

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

Модератоpы
1 139 сообщений

ГородНижний Новгород

Отправлено 18 Июль 2013 - 23:21

Navihome_ru (18 Июль 2013 - 22:00) писал:

Помогите сделать такое выпадающее меню. но не сразу, а только когда человек находится в какой то из категорий.
т.е на главной странице обычный открытый каталог. как только человек переходит в какую либо категорию, каталог сворачивается, а вместо него остается фильтр по товарам. но при наведении на каталог , он либо поверх открывается либо сдвигая фильтр вниз. Спасибо

http://www.mvideo.ru.../lvl_1/class_1/

сайт: navihome.ru

Здравствуйте. В html найдите код

<!-- Каталог -->
		 <h4 class="contentTbodyCatalogHeader" style="display:none;">Каталог товаров</h4>
			 <ul id="subNavigation">
		 {%IFNOT catalog_empty %}
				 {% FOR catalog %}
				 {% IFNOT catalog.HIDE %}
					 <li>
					 <a href="{catalog.URL}"
						 {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
						 {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
					 >{catalog.NAME}</a>
					 </li>
				 {% ENDIF %}
				 {% ENDFOR %}
			 {% ENDIF %}
		 </ul>
		 <!-- end Каталог -->

Внесите в него изменения:

<!-- Каталог -->
			 {% IFNOT index_page %}
			 <div id="mayHideS">
			 {% ENDIF %}
		 <h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>
			 <ul id="subNavigation" {% IFNOT index_page %}class="hidden" {% ENDIF %}>
		 {%IFNOT catalog_empty %}
				 {% FOR catalog %}
				 {% IFNOT catalog.HIDE %}
					 <li>
					 <a href="{catalog.URL}"
						 {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
						 {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
					 >{catalog.NAME}</a>
					 </li>
				 {% ENDIF %}
				 {% ENDFOR %}
			 {% ENDIF %}
		 </ul>
			 {% IFNOT index_page %}</div>{% ENDIF %}
		 <!-- end Каталог -->

в main.css добавьте в конец такой код

.hidden{
display: none;
}

а в main.js после строки

$(document).ready(function(){

добавьте такой код

$("#mayHideS").hover(
function(){$("#subNavigation").removeClass("hidden");},
function(){$("#subNavigation").addClass("hidden");}
);

Наверх

#3 Navihome_ru

Продвинутый пользователь

Пользователи
94 сообщений

ГородМосква

Отправлено 01 Август 2013 - 20:18

sengun (18 Июль 2013 - 23:21) писал:

Здравствуйте. В html найдите код

<!-- Каталог -->
		 <h4 class="contentTbodyCatalogHeader" style="display:none;">Каталог товаров</h4>
			 <ul id="subNavigation">
		 {%IFNOT catalog_empty %}
				 {% FOR catalog %}
				 {% IFNOT catalog.HIDE %}
					 <li>
					 <a href="{catalog.URL}"
						 {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
						 {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
					 >{catalog.NAME}</a>
					 </li>
				 {% ENDIF %}
				 {% ENDFOR %}
			 {% ENDIF %}
		 </ul>
		 <!-- end Каталог -->

Внесите в него изменения:

<!-- Каталог -->
			 {% IFNOT index_page %}
			 <div id="mayHideS">
			 {% ENDIF %}
		 <h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>
			 <ul id="subNavigation" {% IFNOT index_page %}class="hidden" {% ENDIF %}>
		 {%IFNOT catalog_empty %}
				 {% FOR catalog %}
				 {% IFNOT catalog.HIDE %}
					 <li>
					 <a href="{catalog.URL}"
						 {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
						 {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
					 >{catalog.NAME}</a>
					 </li>
				 {% ENDIF %}
				 {% ENDFOR %}
			 {% ENDIF %}
		 </ul>
			 {% IFNOT index_page %}</div>{% ENDIF %}
		 <!-- end Каталог -->

в main.css добавьте в конец такой код

.hidden{
display: none;
}

а в main.js после строки

$(document).ready(function(){

добавьте такой код

$("#mayHideS").hover(
function(){$("#subNavigation").removeClass("hidden");},
function(){$("#subNavigation").addClass("hidden");}
);

Спасибо большое, все шикарно работает) :rolleyes:

Наверх

#4 Coffee

Продвинутый пользователь

Пользователи
178 сообщений

Отправлено 22 Октябрь 2013 - 14:59

Да, круто

а как сделать, чтобы "Товарные категории" как на том же сайте переместились в верхнее горизонтальное меню и выпадали, не сдвигая вниз дивы в левом меню (поверх всех) ?
Хочу на своём сайте применить чтобы КАТАЛОГ был в ряду кнопок "главная", "доставка" и тд. но выпадал! Буду очень благодарен за такую помощь!

Наверх

#5 Vaccina

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

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

Отправлено 23 Октябрь 2013 - 04:12

Подобный вопрос не однократно рассматривался на нашем форуме. Найти обширную информацию по данному вопросу можно например в теме форума http://forum.storela...еста/#entry2072

Наверх

#6 Navihome_ru

Продвинутый пользователь

Пользователи
94 сообщений

ГородМосква

Отправлено 28 Октябрь 2013 - 22:35

Coffee (22 Октябрь 2013 - 14:59) писал:

Да, круто

а как сделать, чтобы "Товарные категории" как на том же сайте переместились в верхнее горизонтальное меню и выпадали, не сдвигая вниз дивы в левом меню (поверх всех) ?
Хочу на своём сайте применить чтобы КАТАЛОГ был в ряду кнопок "главная", "доставка" и тд. но выпадал! Буду очень благодарен за такую помощь!

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