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


Выпадающее Меню Категорий В Шапке


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

#1 Никита_Питер

Никита_Питер

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

  • Пользователи
  • PipPip
  • 20 сообщений
  • Городград на Неве

Отправлено 21 Сентябрь 2016 - 01:14

Помогите реализовать выпадающее меню-список с категориями, при наведении мышкой на КАТАЛОГ в шапке сайта, как сделано в теме Лазурь.

#2 Vaccina

Vaccina

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

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

Отправлено 21 Сентябрь 2016 - 03:23

В шаблоне HTML найдите:
<!-- Меню в шапке -->
			<ul class="mainnav">
			  {% FOR menu %}
				{% FOR header %}
				  {% FOR links %}
					<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
				  {% ENDFOR %}
				{% ENDFOR %}
			  {% ENDFOR %}
			</ul>

замените на:
<!-- Меню в шапке -->
			<ul class="mainnav catalog">
			<li><a href="/catalog" title="Полный список товаров на сайте">Каталог</a>
					<ul class="mainnav">
					{%IFNOT catalog_full_empty%}
					  {%FOR catalog_full%}
						{% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %}
						  <li class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}">
							<a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}">{catalog_full.NAME}</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%}
				  </ul>
			</li>
			</ul>
			 <ul class="mainnav">
			  {% FOR menu %}
				{% FOR header %}
				  {% FOR links %}
				  {% IF menu.header.links.NAME != Каталог %}
					<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
				  {% ENDIF %}
				  {% ENDFOR %}
				{% ENDFOR %}
			  {% ENDFOR %}
			</ul>

В main.css найдите:
/* Меню в шапке */
#custommenu .menunav li {display: inline-block;position: relative;font-size: 18px;}
#custommenu .menunav li a {display: block;color: #fff;font-weight: normal;line-height: 40px;margin-right: 22px;text-transform: uppercase;}
#custommenu .menunav li a:hover {color: #8C2C29;}

после него пропишите:
#custommenu .mainnav.catalog > li > ul {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	background: #FFFFFF;
	top: 60px;
	border: 2px solid #8C2C29;
	padding: 10px;
	max-height: 200px;
}
#custommenu .mainnav.catalog > li:hover > ul {
	display: block;
}
#custommenu .mainnav.catalog > li > ul > li > ul {
	position: relative;
	display: block;
	padding: 0;
	margin: 0;
}
#custommenu .mainnav.catalog > li > ul > li > ul li {
	width: 100%;
	line-height: 16px;
	display: block;
	float: none;
	padding: 0;
	margin: 0;
}
#custommenu .mainnav.catalog > li > ul > li > ul li a {
	padding: 0;
}
#custommenu .mainnav.catalog > li > ul > li > ul ul {
	display: none;
}


#3 Никита_Питер

Никита_Питер

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

  • Пользователи
  • PipPip
  • 20 сообщений
  • Городград на Неве

Отправлено 21 Сентябрь 2016 - 15:54

Спасибо, код вставил, всё работает, без искажений.

#4 evros

evros

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

  • Пользователи
  • PipPipPipPip
  • 284 сообщений
  • ГородМосква

Отправлено 29 Сентябрь 2016 - 11:50

Нужна помощь в настройке КАТАЛОГА. Установил код, но каталог не правильно работает. При наведении открывается маленькое окно с рубриками, а при попытке выбрать рубрику из списка - каталог сворачивается.

#5 Razon

Razon

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

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

Отправлено 29 Сентябрь 2016 - 12:00

Просмотр сообщенияevros (29 Сентябрь 2016 - 11:50) писал:

Нужна помощь в настройке КАТАЛОГА. Установил код, но каталог не правильно работает. При наведении открывается маленькое окно с рубриками, а при попытке выбрать рубрику из списка - каталог сворачивается.

Здравствуйте,  в файле main.css  найдите строки:
#custommenu .mainnav.catalog > li > ul {
	 display: none;
	 position: absolute;
	 left: 0;
	 right: 0;
	 background: #FFFFFF;
	 top: 60px;
	 border: 1px solid #8C2C29;
	 padding: 10px;
	 max-height: 200px;
}

Замените их на:
#custommenu .mainnav.catalog > li > ul {
	 display: none;
	 position: absolute;
	 left: 0;
	 right: 0;
	 background: #FFFFFF;
	 top: 40px;
	 border: 1px solid #8C2C29;
	 padding: 10px;
	 max-height: 200px;
	 overflow: auto;
}

Также добавил строку   overflow: auto; чтоб появилась прокрутка, так как в заданную высоту,  а именно 200px  не помещается все содержимое, если данное решение вас не устроит,  просто удалить данную строку.

#6 evros

evros

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

  • Пользователи
  • PipPipPipPip
  • 284 сообщений
  • ГородМосква

Отправлено 29 Сентябрь 2016 - 13:55

Просмотр сообщенияRa1zon (29 Сентябрь 2016 - 12:00) писал:

Здравствуйте,  в файле main.css  найдите строки:
#custommenu .mainnav.catalog > li > ul {
	 display: none;
	 position: absolute;
	 left: 0;
	 right: 0;
	 background: #FFFFFF;
	 top: 60px;
	 border: 1px solid #8C2C29;
	 padding: 10px;
	 max-height: 200px;
}

Замените их на:
#custommenu .mainnav.catalog > li > ul {
	 display: none;
	 position: absolute;
	 left: 0;
	 right: 0;
	 background: #FFFFFF;
	 top: 40px;
	 border: 1px solid #8C2C29;
	 padding: 10px;
	 max-height: 200px;
overflow: auto;
}

Также добавил строку   overflow: auto; чтоб появилась прокрутка, так как в заданную высоту,  а именно 200px  не помещается все содержимое, если данное решение вас не устроит,  просто удалить данную строку.

Отлично! Благодарю Вас!

#7 evros

evros

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

  • Пользователи
  • PipPipPipPip
  • 284 сообщений
  • ГородМосква

Отправлено 29 Сентябрь 2016 - 14:03

Вопрос! А можно упорядочить категории? Сделать так чтобы в одной линии были 4 рубрики (строки)

#8 Danil

Danil

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

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

Отправлено 29 Сентябрь 2016 - 15:31

Просмотр сообщенияevros (29 Сентябрь 2016 - 14:03) писал:

Вопрос! А можно упорядочить категории? Сделать так чтобы в одной линии были 4 рубрики (строки)
Здравствуйте.
В конец main.css добавьте
#custommenu .mainnav li.level0 {display: inline-block;float: none;vertical-align: top;width: 24%;margin-bottom: 22px;}


#9 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 497 сообщений
  • ГородСамара

Отправлено 21 Февраль 2017 - 11:04

SL-407245
Сделал как описано выше,но он не работает у меня. Помогите решить проблему.

#10 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 497 сообщений
  • ГородСамара

Отправлено 22 Февраль 2017 - 09:45

Просмотр сообщенияadmin (21 Февраль 2017 - 11:04) писал:

SL-407245
Сделал как описано выше,но он не работает у меня. Помогите решить проблему.
Спасибо всё получилось!




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

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