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


Верхнее Меню

Автор darya_kolos, 18 июля 2016 16:52

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

#1 darya_kolos

darya_kolos

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

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

Отправлено 18 Июль 2016 - 16:52

Здравствуйте!

Интересует такой вопрос по верхнему меню - можно ли одну из ссылок сделать выпадающим списком. Т.е. сейчас у меня в верхнем меню ссылки Главная, Новости, Акции, Каталог и т.д. Хочу ссылку Помощь при наведении на которую выпадает список со ссылками на страницы О нас, Размеры одежды и пр. Сделать что-то типа раздела что ли.

#2 Vaccina

Vaccina

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

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

Отправлено 19 Июль 2016 - 02:44

В шаблоне HTML найдите:
<span class="welcome">Добро пожаловать!</span>
					<ul class="links">
					  {% FOR menu %}
						{% FOR header %}
						  {% FOR links %}
							<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
						  {% ENDFOR %}
						{% ENDFOR %}
					  {% ENDFOR %}

после него пропишите:
<li><a href="#">Помощь</a>
<ul>
  {% FOR menu %}
						{% FOR header2 %}
						  {% FOR links %}
							<li><a href="{menu.header2.links.URL}" {% IF menu.header2.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header2.links.TITLE %}title="{menu.header2.links.TITLE}"{% ENDIF %}>{menu.header2.links.NAME}</a></li>
						  {% ENDFOR %}
						{% ENDFOR %}
					  {% ENDFOR %}
</ul>
</li>

В разделе Сайт - Меню создайте меню с идентификатор header2 и добавьте необходимые пункты.

В main.css найдите:
#header-top .topheader-right .sns-quickaccess ul.links {
	list-style: none;
	margin: 0 0;
	padding: 0 0;
	float: left;
	height: 36px;
	overflow: hidden;
}

замениье на:
#header-top .topheader-right .sns-quickaccess ul.links {
	list-style: none;
	margin: 0 0;
	padding: 0 0;
	float: left;
	height: 36px;
}


Далее найдите:
#header-top .topheader-right .sns-quickaccess ul.links li {background: url("{ASSETS_IMAGES_PATH}separator.gif") no-repeat right center;padding: 8px 8px;display: block;line-height:20px;float:left;}

замените на:
#header-top .topheader-right .sns-quickaccess ul.links li {background: url("{ASSETS_IMAGES_PATH}separator.gif") no-repeat right center;padding: 8px 8px;display: block;line-height:20px;float:left;position: relative;}
#header-top .topheader-right .sns-quickaccess ul.links li ul {
	position: absolute;
	right: 0;
	padding: 0;
	z-index: 99;
	width: 100px;
	background: #fff;
	border: 1px solid #ccc;
	display:none;
}
#header-top .topheader-right .sns-quickaccess ul.links li:hover > ul {
	display: block;
}
#header-top .topheader-right .sns-quickaccess ul.links li ul li {
	background: none;
	width: 100%;
	text-align: center;
	padding: 5px 0;
}

#3 darya_kolos

darya_kolos

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

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

Отправлено 19 Июль 2016 - 05:40

Просмотр сообщенияVaccina (19 Июль 2016 - 02:44) писал:

В шаблоне HTML найдите:
<span class="welcome">Добро пожаловать!</span>
				 <ul class="links">
					 {% FOR menu %}
					 {% FOR header %}
						 {% FOR links %}
						 <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
						 {% ENDFOR %}
					 {% ENDFOR %}
					 {% ENDFOR %}

после него пропишите:
<li><a href="#">Помощь</a>
<ul>
{% FOR menu %}
					 {% FOR header2 %}
						 {% FOR links %}
						 <li><a href="{menu.header2.links.URL}" {% IF menu.header2.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header2.links.TITLE %}title="{menu.header2.links.TITLE}"{% ENDIF %}>{menu.header2.links.NAME}</a></li>
						 {% ENDFOR %}
					 {% ENDFOR %}
					 {% ENDFOR %}
</ul>
</li>

В разделе Сайт - Меню создайте меню с идентификатор header2 и добавьте необходимые пункты.

В main.css найдите:
#header-top .topheader-right .sns-quickaccess ul.links {
list-style: none;
margin: 0 0;
padding: 0 0;
float: left;
height: 36px;
overflow: hidden;
}

замениье на:
#header-top .topheader-right .sns-quickaccess ul.links {
list-style: none;
margin: 0 0;
padding: 0 0;
float: left;
height: 36px;
}


Далее найдите:
#header-top .topheader-right .sns-quickaccess ul.links li {background: url("{ASSETS_IMAGES_PATH}separator.gif") no-repeat right center;padding: 8px 8px;display: block;line-height:20px;float:left;}

замените на:
#header-top .topheader-right .sns-quickaccess ul.links li {background: url("{ASSETS_IMAGES_PATH}separator.gif") no-repeat right center;padding: 8px 8px;display: block;line-height:20px;float:left;position: relative;}
#header-top .topheader-right .sns-quickaccess ul.links li ul {
position: absolute;
right: 0;
padding: 0;
z-index: 99;
width: 100px;
background: #fff;
border: 1px solid #ccc;
display:none;
}
#header-top .topheader-right .sns-quickaccess ul.links li:hover > ul {
display: block;
}
#header-top .topheader-right .sns-quickaccess ul.links li ul li {
background: none;
width: 100%;
text-align: center;
padding: 5px 0;
}

Я что-то может не так сделала, или неправильно объяснила... Я бы хотела сохранить верхнее меню как было, но один пункт сделать выпадающим списком. Сейчас остался только этот "должно  быть выпадающий" список. Но получилось у меня вот так (скрин)

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

  • помощь.JPG

#4 Vaccina

Vaccina

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

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

Отправлено 19 Июль 2016 - 05:43

Вам в шаблоне HTML необходимо НЕ заменить блоки, а разместить дополнительный блок после найденного, то есть сейчас вместо:
<div class="quickaccess-inner">
					<li><a href="#">Помощь</a>
<ul>
  {% FOR menu %}
												{% FOR header2 %}
												  {% FOR links %}
														<li><a href="{menu.header2.links.URL}" {% IF menu.header2.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header2.links.TITLE %}title="{menu.header2.links.TITLE}"{% ENDIF %}>{menu.header2.links.NAME}</a></li>
												  {% ENDFOR %}
												{% ENDFOR %}
										  {% ENDFOR %}
</ul>
</li>
					</ul>
				  </div>

должно получиться так:
<div class="quickaccess-inner">
<span class="welcome">Добро пожаловать!</span>
								 <ul class="links">
										 {% FOR menu %}
										 {% FOR header %}
												 {% FOR links %}
												 <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
												 {% ENDFOR %}
										 {% ENDFOR %}
										 {% ENDFOR %}
					<li><a href="#">Помощь</a>
<ul>
  {% FOR menu %}
												{% FOR header2 %}
												  {% FOR links %}
														<li><a href="{menu.header2.links.URL}" {% IF menu.header2.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header2.links.TITLE %}title="{menu.header2.links.TITLE}"{% ENDIF %}>{menu.header2.links.NAME}</a></li>
												  {% ENDFOR %}
												{% ENDFOR %}
										  {% ENDFOR %}
</ul>
</li>
					</ul>
				  </div>

#5 darya_kolos

darya_kolos

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

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

Отправлено 19 Июль 2016 - 06:35

Вот это заработалась - простите, и вправду заменила. Плохо прочитала. Теперь сделала как надо, почти все устраивает. Осталось три нюанса:

1. как перенести этот пункт между Каталог и Контакты?
2. Сделать выпадающее окно по ширине самой ссылки (изменила название с помощь на Полезная информация, чтоб окно было более вместительным)
3. Ссылки на страницы в этом выпадающем списке - выравнивание не по центру, а по левому краю

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

  • Безымянный.jpg

#6 Vaccina

Vaccina

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

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

Отправлено 19 Июль 2016 - 06:41

В main.css найдите:
#header-top .topheader-right .sns-quickaccess ul.links li ul {
	position: absolute;
	right: 0;
	padding: 0;
	z-index: 99;
	width: 100px;
	background: #fff;
	border: 1px solid #ccc;
	display: none;
}

замените на:
#header-top .topheader-right .sns-quickaccess ul.links li ul {
	position: absolute;
	right: 0;
	padding: 0;
	z-index: 99;
	background: #fff;
	border: 1px solid #ccc;
	display: none;
}

далее найдите:
#header-top .topheader-right .sns-quickaccess ul.links li ul li {
	background: none;
	width: 100%;
	text-align: center;
	padding: 5px 0;
}

замените на:
#header-top .topheader-right .sns-quickaccess ul.links li ul li {
	background: none;
	width: 100%;
	text-align: left;
	padding: 5px !important;
}

Данный пункт можно сделать или первым или последним, так как если разместить среди других пунктов меню, то один цикл будет в другом цикле, что приведет к ошибке.
{% FOR menu %}
 {% FOR header %}
	 {% FOR links %}

{% FOR menu %}
	 {% FOR header2 %}
		  {% FOR links %}
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}

{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}

#7 darya_kolos

darya_kolos

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

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

Отправлено 19 Июль 2016 - 06:51

Просмотр сообщенияVaccina (19 Июль 2016 - 06:41) писал:

В main.css найдите:
#header-top .topheader-right .sns-quickaccess ul.links li ul {
position: absolute;
right: 0;
padding: 0;
z-index: 99;
width: 100px;
background: #fff;
border: 1px solid #ccc;
display: none;
}

замените на:
#header-top .topheader-right .sns-quickaccess ul.links li ul {
position: absolute;
right: 0;
padding: 0;
z-index: 99;
background: #fff;
border: 1px solid #ccc;
display: none;
}

далее найдите:
#header-top .topheader-right .sns-quickaccess ul.links li ul li {
background: none;
width: 100%;
text-align: center;
padding: 5px 0;
}

замените на:
#header-top .topheader-right .sns-quickaccess ul.links li ul li {
background: none;
width: 100%;
text-align: left;
padding: 5px !important;
}

Данный пункт можно сделать или первым или последним, так как если разместить среди других пунктов меню, то один цикл будет в другом цикле, что приведет к ошибке.
{% FOR menu %}
{% FOR header %}
	 {% FOR links %}

{% FOR menu %}
	 {% FOR header2 %}
		 {% FOR links %}
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}

{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}

Это сейчас выглядит примерно как
Меню_1 Меню_2
И второе никак не вставить в первое?

А слишком сложно разбить первое меня на два разных и между ними поставить меню с выпадающим списком?

#8 Vaccina

Vaccina

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

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

Отправлено 19 Июль 2016 - 06:56

В этом случае в разделе Сайт - Меню у первого меню вторую половину пунктов удалите, далее создайте новый блок меню с переменной header3 и добавьте в него удаленные пункты, в шаблоне HTML после:
<li><a href="#">Помощь</a>
<ul>
  {% FOR menu %}
																								{% FOR header2 %}
																								  {% FOR links %}
																												<li><a href="{menu.header2.links.URL}" {% IF menu.header2.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header2.links.TITLE %}title="{menu.header2.links.TITLE}"{% ENDIF %}>{menu.header2.links.NAME}</a></li>
																								  {% ENDFOR %}
																								{% ENDFOR %}
																				  {% ENDFOR %}
</ul>
</li>

вставьте:
{% FOR menu %}
																				 {% FOR header3 %}
																								 {% FOR links %}
																								 <li><a href="{menu.header3.links.URL}" {% IF menu.header3.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header3.links.TITLE %}title="{menu.header3.links.TITLE}"{% ENDIF %}>{menu.header3.links.NAME}</a></li>
																								 {% ENDFOR %}
																				 {% ENDFOR %}
																				 {% ENDFOR %}

#9 darya_kolos

darya_kolos

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

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

Отправлено 19 Июль 2016 - 13:43

Просмотр сообщенияVaccina (19 Июль 2016 - 06:56) писал:

В этом случае в разделе Сайт - Меню у первого меню вторую половину пунктов удалите, далее создайте новый блок меню с переменной header3 и добавьте в него удаленные пункты, в шаблоне HTML после:
<li><a href="#">Помощь</a>
<ul>
{% FOR menu %}
																							 {% FOR header2 %}
																								 {% FOR links %}
																											 <li><a href="{menu.header2.links.URL}" {% IF menu.header2.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header2.links.TITLE %}title="{menu.header2.links.TITLE}"{% ENDIF %}>{menu.header2.links.NAME}</a></li>
																								 {% ENDFOR %}
																							 {% ENDFOR %}
																				 {% ENDFOR %}
</ul>
</li>

вставьте:
{% FOR menu %}
																				 {% FOR header3 %}
																								 {% FOR links %}
																								 <li><a href="{menu.header3.links.URL}" {% IF menu.header3.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header3.links.TITLE %}title="{menu.header3.links.TITLE}"{% ENDIF %}>{menu.header3.links.NAME}</a></li>
																								 {% ENDFOR %}
																				 {% ENDFOR %}
																				 {% ENDFOR %}

Ура! Вы просто мой спаситель :) я уж боялась, что скажете - вариант слишком муторный :)
Обратно в Изменение общей стилистики


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

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

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