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

[yuragravi]

Добрый день! как сделать ссылки горизонтального меню в шапке сайта иконками?

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

• 

[ne_yana]

yuragravi (21 Октябрь 2013 - 11:15) писал:

Добрый день! как сделать ссылки горизонтального меню в шапке сайта иконками?

Добрый день, уточните, пожалуйста, о каком магазине идет речь. Если Вы хотите получить, как на прикрепленной картинке, в магазине с аккаунтом

238773,

то добавьте в файле style.css

.root_menu.active a {
border: 1px solid rgb(255, 143, 0);
background: rgb(255, 143, 0);
border-radius: 6px;
}

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

• 

[yuragravi]

ne_yana (21 Октябрь 2013 - 12:41) писал:

Добрый день, уточните, пожалуйста, о каком магазине идет речь. Если Вы хотите получить, как на прикрепленной картинке, в магазине с аккаунтом

238773,

то добавьте в файле style.css

.root_menu.active a {
border: 1px solid rgb(255, 143, 0);
background: rgb(255, 143, 0);
border-radius: 6px;
}

Спасибо,как я и хотел. а на остальных иконках как? и где цвет/размер регулировать?

Еще вопрос - можно ли активировать дополнительное горизонтальное меню в верхней черной строчке?

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

• 

[ne_yana]

yuragravi (21 Октябрь 2013 - 14:35) писал:

Спасибо,как я и хотел. а на остальных иконках как? и где цвет/размер регулировать?

Еще вопрос - можно ли активировать дополнительное горизонтальное меню в верхней черной строчке?

Удалите предыдущий код и вставьте

.root_link {
border: 1px solid rgb(255, 143, 0);
background: rgb(255, 143, 0);
border-radius: 6px;
}

все ссылки меню станут такими.
За цвет иконок отвечают параметры background и border,  в них нужно изменить  rgb(255, 143, 0) на желаемый цвет.
Уточните, пожалуйста, о размере чего Вы говорите, шрифта или самих иконок?
Дополнительное меню можно реализовать, меню должно быть точно таким, как в прикрепленном скрине?

[yuragravi]

ne_yana (21 Октябрь 2013 - 15:04) писал:

Удалите предыдущий код и вставьте

.root_link {
border: 1px solid rgb(255, 143, 0);
background: rgb(255, 143, 0);
border-radius: 6px;
}

все ссылки меню станут такими.
За цвет иконок отвечают параметры background и border,  в них нужно изменить  rgb(255, 143, 0) на желаемый цвет.
Уточните, пожалуйста, о размере чего Вы говорите, шрифта или самих иконок?
Дополнительное меню можно реализовать, меню должно быть точно таким, как в прикрепленном скрине?

Ссылки , что сейчас в  иконках - на верхнюю черную строчку, белым подчеркнутым шрифтом и последний цветным, а в иконки другое меню и ссылки выпадающие!

[ne_yana]

yuragravi (21 Октябрь 2013 - 15:24) писал:

Ссылки , что сейчас в  иконках - на верхнюю черную строчку, белым подчеркнутым шрифтом и последний цветным, а в иконки другое меню и ссылки выпадающие!

Замените

#megamenu {
position: absolute;
height: 54px;
top: 90px;
left: 238px;
}

на

#megamenu {
position: absolute;
height: 54px;
top: -18px;
left: 238px;
}

Вставьте

<ul id="menu2">
  <li><a>О сервисе</a></li>
  <li><a>Где купить?</a></li>
  <li><a>Доставка и оплата</a></li>
  <li><a>Корпоративным клиентам</a></li>
  <li><a>Активировать подарок</a></li>
</ul>

после

		{% IFNOT menu_empty %}
		  <ul class="accordion_main">
			<li class="parent">Меню
			  <ul class="accordion">
				{% FOR menu %}
				  {% FOR header %}
					{% FOR links %}
					  <li class="root_menu {% IF menu.header.links.SELECTED %}active{% ENDIF %}">
						<a href="{menu.header.links.URL}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} class="root_link">{menu.header.links.NAME}</a>
					  </li>
				  {% ENDFOR %}
				  {% ENDFOR %}
				{% ENDFOR %}
			  </ul>
			</li>
		  </ul>
		{% ENDIF %}
		<!-- END Блок навигации --> 
	  </div>

Внутри тега <a> необходимо будет прописать адрес, куда эта ссылка переводит.
Замените

.root_link {
border: 1px solid rgb(255, 143, 0);
background: rgb(255, 143, 0);
border-radius: 6px;
}

на

#menu2 li a {
border: 1px solid rgb(255, 143, 0);
background: rgb(255, 143, 0);
border-radius: 6px;
}

Заменить

#megamenu li .root_link {
color: #666666;
text-transform: uppercase;
font-size: 11px;
text-decoration: none;
}

на

#megamenu li .root_link {
color: #FFFFFF;
text-transform: uppercase;
font-size: 11px;
text-decoration: underline;
}

Добавьте

#menu2 {
margin-left: 238px;
}

Уточните, пожалуйста, насчет выпадающих ссылок.

[yuragravi]

сделал все по инструкции, в верхней черной строчке меню все работает замечательно

в желтых иконках тоже прописал как сказали, только название ссылок поменял, но они стали  в ряд и не кликабельны , пробовал вставлять в тег <a> адрес - безрезультатно

где ошибка?

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

• 

[ne_yana]

yuragravi (22 Октябрь 2013 - 11:28) писал:

сделал все по инструкции, в верхней черной строчке меню все работает замечательно

в желтых иконках тоже прописал как сказали, только название ссылок поменял, но они стали  в ряд и не кликабельны , пробовал вставлять в тег <a> адрес - безрезультатно

где ошибка?

Добрый день, добавьте в файл style.css

#menu2 li {
padding: 25px 8px 5px 8px;
float: left;
position: relative;
}

Приведите пример того, как Вы прописывали адреса внутри тега <a>, либо для каждой ссылки пришлите адреса, на которые они должны ссылаться.

[yuragravi]

ne_yana (22 Октябрь 2013 - 11:37) писал:

Добрый день, добавьте в файл style.css

#menu2 li {
padding: 25px 8px 5px 8px;
float: left;
position: relative;
}

Приведите пример того, как Вы прописывали адреса внутри тега <a>, либо для каждой ссылки пришлите адреса, на которые они должны ссылаться.

<ul id="menu2">
  <li><http://dari73.ru/catalog/Multipodarki>Подарочные наборы</a></li>
  <li><http://dari73.ru/cat...ючения</a></li>  Приключения</a></li>
  <li><http://dari73.ru/cat...aty>Сертификаты>Сертификаты магазинов</a></li>

соответственно адреса
http://dari73.ru/catalog/Multipodarki
http://dari73.ru/cat...riklyucheniya-2
http://dari73.ru/cat...nye-sertifikaty

[empty9228]

Здравствуйте!
Вы немного не так написали, ссылки.

<ul id="menu2">
  <li><a href =" http://dari73.ru/catalog/Multipodarki"> Подарочные наборы</a></li>
  <li><a href =" http://dari73.ru/cat...ючения"> Приключения</a></li>
  <li><a href =" http://dari73.ru/cat...aty>Сертификаты">Сертификаты магазинов</a></li>

[yuragravi]

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

[support 2.0]

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

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

Оставьте, пожалуйста, какую-нибудь одну тему дизайн-шаблона Вашего магазина, чтобы мы смогли Вам помочь. Вы можете открыть другой тестовый сайт и изменять дизайн именно там, чтобы у нас не возникало проблем в ответе Вам.

[yuragravi]

support 2.0 (22 Октябрь 2013 - 16:06) писал:

Оставьте, пожалуйста, какую-нибудь одну тему дизайн-шаблона Вашего магазина, чтобы мы смогли Вам помочь. Вы можете открыть другой тестовый сайт и изменять дизайн именно там, чтобы у нас не возникало проблем в ответе Вам.

вернул
вспоминал свой старый шаблон, там тоже всё сбивалось )

[yuragravi]

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

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

вопрос открыт, что делать?

[Сake]

Пожалуйста, приведите пример такого отображения в виде прикрепленного скриншота вашего сайта.

[yuragravi]

Сake (23 Октябрь 2013 - 02:43) писал:

Пожалуйста, приведите пример такого отображения в виде прикрепленного скриншота вашего сайта.

айфон  браузер сафари, в хроме так же

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

• 

[yuragravi]

подвинул меню правее и теперь еще сильнее вышел за границы

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

• 
• 
• 

[yuragravi]

В IE 7 уже вся страница вышла за границы

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

• 

[Vaccina]

Добавленное вами меню не подразумевает под собой использование адаптивности. Так как используемая вами тема оформления является адаптивной, то она в свою очередь меняет размеры элементов в зависимости от размера экрана и ваше меню не вписывается в данные изменения. На данном форуме не однократно говорилось что изменять блоки, добавлять, передвигать их необходимо с осторожностью или же не делать это вовсе, так как это нарушит всю адаптивность которую восстановить будет проблематично. Если у вас изначально подразумевается изменение дизайна, то лучше использовать не адаптивный дизайн или же дизайн приближенный к тому что хотелось бы вам видеть. В вашем случае лучше всего не делать отступ для добавленного меню, т.е в файле стилей style.css найти и удалить правило

#menu2 {
	margin-left: 338px;
}

тогда подобных проблем не будет и меню будет нормально смотреться как на большом экране, так и на маленьком.

[yuragravi]

Убрал, но в IE все так же криво