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


Выпадающее Меню

Автор asamoylov, 15 июня 2013 12:03

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

#1 asamoylov

asamoylov

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

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

Отправлено 15 Июнь 2013 - 12:03

Подскажите, можно ли сделать каталог товаров таким образом?
Подобные вопросы уже задавались но конкретного такого решения как я хочу не было.
Изображение

#2 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 15 Июнь 2013 - 14:49

Просмотр сообщенияasamoylov (15 Июнь 2013 - 12:03) писал:

Подскажите, можно ли сделать каталог товаров таким образом?
Подобные вопросы уже задавались но конкретного такого решения как я хочу не было.
Изображение

замените код каталога в шаблоне HTML.
То есть код:
<!-- Каталог товаров -->
		 <h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>
		 {%IFNOT catalog_empty %}
			 {% FOR catalog %}
			 {% IFNOT catalog.HIDE %}
				 {% IF catalog.FIRST %}<ul>{% ENDIF %}
					 <li>
					 <a href="{catalog.URL}"
						 {% IF catalog.CURRENT %}
						 class="contentTbodyCatalogCurent"
						 {% ELSEIF catalog.CURRENT_PARENT %}
						 class="contentTbodyCatalogCurentBranch"
						 {% ENDIF %}
					 >
					 {catalog.NAME}
					 <!-- Отображение количества товаров в категории -->
					 {% IF catalog.GOODS_COUNT>0 %}
						 ({catalog.GOODS_COUNT})
					 {% ENDIF %}
					 </a>
				 {% IF catalog.ISSET_SUB=0 %}</li>{% ENDIF %}
				 {% IF catalog.LAST %}
				 {% FOR out %}</ul>{%IFNOT catalog.out.LAST %}</li>{% ENDIF %}{% ENDFOR %}
				 {% ENDIF %}
			 {% ENDIF %}
			 {% ENDFOR %}
		 {% ENDIF %}
замените на:
<!-- Каталог товаров -->
		 <h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>
			 {%IFNOT catalog_full_empty%}
			 {%FOR catalog_full%}
			 {% IFNOT catalog_full.HIDE %}
				 {% 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}"
						 {% IF catalog_full.CURRENT %}
						 class="contentTbodyCatalogCurent"
						 {% ELSEIF catalog_full.CURRENT_PARENT %}
						 class="contentTbodyCatalogCurentBranch"
						 {% ENDIF %}
					 >
					 <span>{catalog_full.NAME}</span>
					 <!-- Отображение количества товаров в категории -->
					 {% IF catalog_full.GOODS_COUNT>0 %}
						 ({catalog_full.GOODS_COUNT})
					 {% ENDIF %}
					 </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 %}
			 {% ENDIF %}
			 {% ENDFOR %}
		 {% ENDIF %}

Далее в конец main.css вставьте код:
#nav{padding:0 0 32px 7px; margin:0; }
/* Все уровни */
#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 { white-space:nowrap; cursor:pointer; }
#nav li ul a span { white-space:normal; }
/* 1й уровень вложенности */
#nav li {}
#nav li a{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 > */

Цвета можно изменить потом.

Далее в конец main.js добавьте код:
$(document).ready(function(){
  // Действие при наведении на меню категорий, для возможности отображения вложенного подменю
  $('#nav li').hover(
		function () {
		  $(this).addClass('over');
		},
		function () {
		  $(this).removeClass('over');
		}
  );
});

#3 asamoylov

asamoylov

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

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

Отправлено 15 Июнь 2013 - 16:10

Вот такой результат получился.
Изображение

#4 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 16 Июнь 2013 - 08:38

Просмотр сообщенияasamoylov (15 Июнь 2013 - 16:10) писал:

Вот такой результат получился.
Изображение

Найдите код в main.js:
#nav{padding:0 0 32px 7px; margin:0; }
/* Все уровни */
#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 { white-space:nowrap; cursor:pointer; }
#nav li ul a span { white-space:normal; }
/* 1й уровень вложенности */
#nav li {}
#nav li a{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 > */
и замените на:
$(document).ready(function(){
// Действие при наведении на меню категорий, для возможности отображения вложенного подменю
$('#nav li').hover(
			 function () {
				 $(this).addClass('over');
			 },
			 function () {
				 $(this).removeClass('over');
			 }
);
});

#5 asamoylov

asamoylov

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

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

Отправлено 19 Июнь 2013 - 16:37

Спасибо, все работает как надо.

#6 malinaro

malinaro

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

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

Отправлено 16 Август 2013 - 06:15

Просмотр сообщенияmiyako (16 Июнь 2013 - 08:38) писал:

Найдите код в main.js: 
 #nav{padding:0 0 32px 7px; margin:0; } /* Все уровни */ #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 { white-space:nowrap; cursor:pointer; } #nav li ul a span { white-space:normal; } /* 1й уровень вложенности */ #nav li {} #nav li a{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 > */
и замените на: 
 $(document).ready(function(){ // Действие при наведении на меню категорий, для возможности отображения вложенного подменю $('#nav li').hover( function () { $(this).addClass('over'); }, function () { $(this).removeClass('over'); } ); });


В Найдите код в main.js: нет такого кода
У меня на работает после всего проделанного просто раскрылись в се категории

#7 Taisia

Taisia

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

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

Отправлено 16 Август 2013 - 09:55

у вас не вставлен код в файл main.css

код в файле main.js  просто вставьте в самый конец файла

так же нет изменений в коде html

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

после точного выполнения всех шагов меню у вас заработает

#8 mike86spb

mike86spb

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

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

Отправлено 12 Ноябрь 2013 - 20:05

Добрый вечер. Подскажите пожалуйста. Как увеличить размер меню и всего остального?

#9 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 12 Ноябрь 2013 - 20:07

Просмотр сообщенияmike86spb (12 Ноябрь 2013 - 20:05) писал:

Добрый вечер. Подскажите пожалуйста. Как увеличить размер меню и всего остального?
Пожалуйста, не могли бы назвать адрес сайта или номер аккаунта и рассказать более подробно что вы хотите изменить.
Обратно в Каталог товаров


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Лайт
  5. → Каталог товаров
  6. Privacy Policy