Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

Меню, Изменение Цвета При Наведении Выпадающего Меню, Изменение Шрифта И Размера Меню.

Автор origina1, 20 июля 2013 00:56

Меню изменение цвета при наведении

Вперед

Авторизуйтесь для ответа в теме

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

#1 origina1

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

Пользователи
46 сообщений

Отправлено 20 Июль 2013 - 00:56

Привет!

1. Убрать подчеркивание при наведении курсора, как самого меню так и всплывающего.

2. Убрать треугольники

3. Изменение цвета пункта меню при наведении курсора, как самого меню так и всплывающего.

4. Изменение шрифта, размера, цвета

5. Закруглить края меню

Заранее благодарю!

Наверх

#2 Vaccina

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

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

Отправлено 20 Июль 2013 - 05:18

Сайт - Редактор шаблонов - style.css.
1. Найдите:

.nav a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

замените на:

.nav a:hover {
	color: #FFFFFF;
	text-decoration: none;
}

2.Найдите и удалите:

.nav > li > .parent {
	background-image: url("http://design.xn--90abkter0ahi.xn--p1ai/downArrow.png");
	background-position: right center;
	background-repeat: no-repeat;
}

3.Найдите:

.nav a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

добавьте стиль background необходимым вам значением
4.Найдите:

.nav a {
	background: none repeat scroll 0 0 #FFFFFF;
	color: #FFFFFF;
	padding: 15px 20px;
	text-transform: uppercase;
	z-index: 50;
}

добавьте font с необходимым значением, подробнее о стиле: http://htmlbook.ru/css/font
5.Найдите:

.nav {
	background: none repeat scroll 0 0 #000000;
	list-style: none outside none;
	position: relative;
	z-index: 30;
}

замените на:

.nav {
	background: none repeat scroll 0 0 #000000;
	border-radius: 10px 10px 10px 10px;
	list-style: none outside none;
	position: relative;
	z-index: 30;
}

Наверх

#3 origina1

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

Пользователи
46 сообщений

Отправлено 21 Июль 2013 - 17:46

1. Убрать подчеркивание при наведении курсора, как самого меню так и всплывающего.
Всё сделано только ещё нужно убрать подчеркивание при активной кнопке, на данный момент выглядит вот так

2. Убрать треугольники
Готово

3. Изменение цвета пункта меню при наведении курсора, как самого меню так и всплывающего.
Поиск Ctrl+F не выдает такого же кода как Вы указали

4. Изменение шрифта, размера, цвета

5. Закруглить края меню
Поиск Ctrl+F не выдает такого же кода как Вы указали

Наверх

#4 miyako

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

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

Отправлено 22 Июль 2013 - 07:17

origina1 (21 Июль 2013 - 17:46) писал:

подчеркивание меню.jpg

2. Убрать треугольники
Готово

3. Изменение цвета пункта меню при наведении курсора, как самого меню так и всплывающего.
Поиск Ctrl+F не выдает такого же кода как Вы указали

4. Изменение шрифта, размера, цвета

5. Закруглить края меню
Поиск Ctrl+F не выдает такого же кода как Вы указали

1) Попробуйте очистить кэш. При наведении подчеркивания у меня нет

3) Добавьте в конец style.css код:

.nav a:hover {
	  background: red;
}

Измените цвет red на Ваш.

4) ?

5) Добавьте в конец style.css код:

.nav {
		border-radius: 10px 10px 10px 10px;
}

Наверх

#5 vender12

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

Пользователи
172 сообщений

Отправлено 07 Март 2014 - 19:54

Добрый день!
Вопрос такой, есть в главном меню-пункт меню "Здоровье" хочу создать страницы и что бы эти страницы выпадали при наведении.на пункт Здоровье.
Что и как мне поступить?
магазин 8626
спасибо

Наверх

#6 Сake

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

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

Отправлено 08 Март 2014 - 01:45

Подобный вопрос ранее рассматривался в следующей теме форума http://forum.storela...ыпадающее-меню/

Наверх

#7 vender12

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

Пользователи
172 сообщений

Отправлено 20 Март 2014 - 20:57

Сake (08 Март 2014 - 01:45) писал:

Подобный вопрос ранее рассматривался в следующей теме форума http://forum.storela...ыпадающее-меню/

мне нужно только вкладку "здоровье" такую сделать, я все сделал как там написано, это было ужас все стили повело и заново нужно было меню делать.
потом бэкап восстановил

Сообщение отредактировал vender12: 20 Март 2014 - 21:00

Наверх

#8 support 2.0

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

Модераторы
4 950 сообщений

Отправлено 20 Март 2014 - 23:18

vender12 (20 Март 2014 - 20:57) писал:

Я вам сделала меню с тестовым пунктом меню. Так как Вы периодически восстанавливали бэкап, то я решила Вам тоже его сделать с пунктами выпадающего меню (бэкап от 21.03.2014 00:17:50)

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

Наверх

#9 vender12

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

Пользователи
172 сообщений

Отправлено 21 Март 2014 - 08:16

support 2.0 (20 Март 2014 - 23:18) писал:

спс, сделайте пожалуйста еще раз (меню)а то я вчера примерно в 01:00 еще после этого делал изменения на сайте, не хочу что бы они потерялись, спасибо большое

Наверх

#10 support 2.0

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

Модераторы
4 950 сообщений

Отправлено 24 Март 2014 - 22:27

vender12 (21 Март 2014 - 08:16) писал:

Инструкцию на Вашем сайте выполнила. Цвет при наведении подпункта можно будет конечно же заменить. Добавлять подпункты в разделе Сайт -> меню -> Подменю Здоровье

Наверх

#11 vender12

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

Пользователи
172 сообщений

Отправлено 25 Март 2014 - 19:10

support 2.0 (24 Март 2014 - 22:27) писал:

у меня после добавления меню пропал текст (регистрация/вход)

Наверх

#12 support 2.0

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

Модераторы
4 950 сообщений

Отправлено 25 Март 2014 - 21:06

vender12 (25 Март 2014 - 19:10) писал:

у меня после добавления меню пропал текст (регистрация/вход)

Поставила Вам регистрацию на сайт. Не совсем помню в каком месте она стояла: над поиском или после. Также немного подкорректировала стили при наведении на них.

Наверх

#13 vender12

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

Пользователи
172 сообщений

Отправлено 25 Март 2014 - 21:19

support 2.0 (25 Март 2014 - 21:06) писал:

выше есть скрин где была регистрация vender12 (20 March 2014 - 20:57) писал:
только сейчас еще слово "поиск" ушло вниз

Наверх

#14 support 2.0

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

Модераторы
4 950 сообщений

Отправлено 25 Март 2014 - 21:37

vender12 (25 Март 2014 - 21:19) писал:

выше есть скрин где была регистрация vender12 (20 March 2014 - 20:57) писал:
только сейчас еще слово "поиск" ушло вниз

Вероятно в этот момент времени Вы изменяли файл main.css, т.к. стилей, которые я ставила в тот файл сейчас не было. Поставила Вам их обратно. На всякий случай скрин как должно выглядеть и стили, которые нужно добавить в конце файла main.css

#linkBox {
	 color: #FFFFFF;
	 height: 40px;
	 right: 30px;
	 position: absolute;
	 top: 100px;
}
#linkBox a.second {
	 margin-right: 9px;
}
#linkBox a.first {
	 margin-left: 9px;
}
#linkBox a {
	 color: #FFFFFF;
	 /* font: 14px Arial,Helvetica,sans-serif; */
	 text-decoration: underline;
	 font-weight: bold;
}
#linkBox a:hover {
color: #FF0000;
}

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

Наверх

#15 vender12

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

Пользователи
172 сообщений

Отправлено 25 Март 2014 - 22:20

support 2.0 (25 Март 2014 - 21:37) писал:

#linkBox {
	 color: #FFFFFF;
	 height: 40px;
	 right: 30px;
	 position: absolute;
	 top: 100px;
}
#linkBox a.second {
	 margin-right: 9px;
}
#linkBox a.first {
	 margin-left: 9px;
}
#linkBox a {
	 color: #FFFFFF;
	 /* font: 14px Arial,Helvetica,sans-serif; */
	 text-decoration: underline;
	 font-weight: bold;
}
#linkBox a:hover {
color: #FF0000;
}

спасибо

Наверх

#16 Новичок Ю

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

Пользователи
326 сообщений

Отправлено 29 Май 2014 - 18:13

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

Наверх

#17 Vaccina

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

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

Отправлено 30 Май 2014 - 01:48

1. http://forum.storela...еню/#entry28263
2. В style.css найдите:

.head {
	font-size: 15px;
	margin-bottom: 0;
	margin-left: 35px;
	margin-top: -2px;
	position: relative;
	width: 100%;
}

замените на:

.head {
	background: none repeat scroll 0 0 #8A7C92;
	font-size: 15px;
	height: 30px;
	margin: 0 auto;
	position: relative;
	width: 100%;
}

.head ul {
	height: 40px;
	padding: 0;
}

замените на:

.head ul {
	padding: 0;
}

3.в style.css найдите:

.head a {
	display: inline-block;
	line-height: 30px;
	padding: 0 10px 0 60px;
	text-align: center;
	text-decoration: none;
}

замените на:

.head a {
	display: inline-block;
	line-height: 30px;
	padding: 0 20px;
	text-align: center;
	text-decoration: none;
}

Наверх

#18 Новичок Ю

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

Пользователи
326 сообщений

Отправлено 30 Май 2014 - 20:47

Все получилось, кроме выпадающего меню. . http://forum.storela...еню/#entry28263 там для другого шаблона, вообще что-то странное получилось (у меня тема вечность).
Подскажите, пожалуйста, как левое меню воткнуть в кнопку "Каталог". Для других кнопок не нужно выпадающее меню. Спасибо.

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

Наверх

#19 Vaccina

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

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

Отправлено 31 Май 2014 - 03:04

в шаблоне HTML найдите:

<!-- Блок навигации -->
	  {% IFNOT menu_empty %}
		<nav class="head">
		  <ul class="head">
		  {% 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 %}
		  </ul>
		<a href="#" id="pull">Меню</a>
	   </nav>
	  {% ENDIF %}
	  <!-- /Блок навигации -->

замените на:

<!-- Блок навигации -->
	  {% IFNOT menu_empty %}
		<nav class="head">
		  <ul class="head">
		  {% 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>
	  {% IF menu.header.links.NAME=Каталог %}
				  <ul class="level1">
					{%FOR catalog%}
	  <li {% IF catalog.HIDE %}style="display:none;" {% ENDIF %}{% IF catalog.CURRENT %}class="open"{% ELSEIF catalog.CURRENT_PARENT %}class="open"{% ENDIF %} >
	   <a href="{catalog.URL}" {% IF catalog.CURRENT %}class="selected"{% ENDIF %}>{catalog.NAME}</a>
	  </li>
	 {%ENDFOR%}
				  </ul>
				  {% ENDIF %}
				</li>
			 {% ENDFOR %}
			{% ENDFOR %}
		  {% ENDFOR %}
		  </ul>
		<a href="#" id="pull">Меню</a>
	   </nav>
	  {% ENDIF %}
	  <!-- /Блок навигации -->

далее в style.css находим:

.head li {
display: inline;
float: left;
}

меняем на:

.head li {
display: inline;
float: left;
position:relative;
}
.level1 {
	background:  #ссс;
	display: none;
	left: 0;
	position: absolute;
	top: 30px;
	z-index: 99;
}
.head li:hover .level1{
  display:block;
}
.head li .level1 li{
  display:block;
}

Наверх

#20 Новичок Ю

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

Пользователи
326 сообщений

Отправлено 31 Май 2014 - 13:15

Добрый день! Все сделала, но ничего не изменилось. Что еще можно сделать? Спасибо.

Наверх

Вперед

Обратно в Изменение общей стилистики

Темы с аналогичным тегами Меню, изменение цвета при наведении

Вопросы работы сервиса StoreLand → Другие вопросы → Изменение Url'a Ссылки Навигационного Меню Автор Гость_smoke_story_* , 05 нояб. 2019 Навигация, Меню и 4 еще...	3 Ответов 3 095 Просмотров	Vaccina 16 нояб. 2019
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Лазурь → Каталог товаров → Сделать Выпадающее Меню Автор Гость_arpico-latex_* , 16 янв. 2019 выпадающее, меню	3 Ответов 1 396 Просмотров	Vaccina 22 янв. 2019
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Осень → Нужна Помощь Редактировании Шаблона Осень Автор Гость_Olga1215_* , 16 нояб. 2018 осень, шапка, фон сайта и 4 еще...	0 Ответов 3 141 Просмотров	Olga1215 16 нояб. 2018
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Весна → Другое → Убрать Строку-Меню Перед Подвалом Автор Гость_Olivka_* , 14 июня 2018 подвал, меню	2 Ответов 1 818 Просмотров	Vaccina 15 июня 2018
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Лазурь → Помощь По Верстки Автор Гость_akhmanaev666_* , 13 июня 2018 меню, лазурь, описание товара	1 Ответ 2 002 Просмотров	akhmanaev666 13 июня 2018

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

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

Меню, Изменение Цвета При Наведении Выпадающего Меню, Изменение Шрифта И Размера Меню.

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

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

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

Темы с аналогичным тегами Меню, изменение цвета при наведении

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

Войти

Google поиск