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

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

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

[Vaccina]

В шаблоне 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;
}

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

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

[evros]

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

[Razon]

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  не помещается все содержимое, если данное решение вас не устроит,  просто удалить данную строку.

[evros]

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  не помещается все содержимое, если данное решение вас не устроит,  просто удалить данную строку.

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

[evros]

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

[Danil]

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;}

[admin]

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

[admin]

admin (21 Февраль 2017 - 11:04) писал:

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

Спасибо всё получилось!

[status321]

Доброе утро. Нужна помощь
1. В выпадающем каталоге рассредоточить категории по всей ширине
2. Скрыта категория Пледы, но в выпадающем каталоге она отображается. См. фото. Аккаунт SL-557538

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

• 

[stasia]

status321 (08 Апрель 2024 - 07:17) писал:

Доброе утро. Нужна помощь
1. В выпадающем каталоге рассредоточить категории по всей ширине
2. Скрыта категория Пледы, но в выпадающем каталоге она отображается. См. фото. Аккаунт SL-557538

Здравствуйте.
Зайдите в Редактор шаблонов --- main.css и найдите данный код:

#custommenu .mainnav > li {float: left;}

И сразу после добавьте данный код:

#custommenu ul li ul.mainnav > li {padding: 0 16px;align-items: center;}

Зайдите в раздел Сайт---Редактор шаблонов---HTML и найдите код:  

			<!-- Меню в шапке -->
						<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 %}">

Замените его на:  

			<!-- Меню в шапке -->
						<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 {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}">

[status321]

Супер. Огромное спасибо