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

[Маврин]

Доброго всем дня! У меня вапрос.Хотел бы чтоб в меню,там где Главная,Корзина при наведении мышкой,надпись плавно увеличевалась и изменяла цвет.Как бы это мне сделать? Помогите

[support]

Моё мнение что для кросбраузерности лучше всего эту задачу реализовывать с помощью jquery c помощью функции hover возможно Вам так же будет интересен сайт visualjquery.com

Собственно поскольку не указан шаблон, опишу принцип работы. Для начала создадим функцию которая у выбранного селектора (Туда надо будет вставить класс пунктов меню) изменяет размер и цвет.

$("селектор кнопки меню").hover(
  function () {
	size = $(this).css('font-size');
	color = $(this).css('color');
	$(this).css('font-size', '13px');
	$(this).css('color', '#555555');
  }, 
  function () {
	$(this).css('font-size', size );
	$(this).css('color', color);
  }
);

Для подбора цвета можно использовать colorpicker.com

Далее вставляем получившийся код через раздел "Сайт" > "Редактор тем" в JavaScritpt файле main.js

После этого должно заработать.

[Маврин]

Всё это я скопировал и вставил в конец файла main.js,а результата нет(
Может я что то не так делаю?

[support]

Вы просто скопировали код, а часть селектор кнопки меню заменяли на ваш элемент? Возможно конечно и ошибка. Консоль ошибок в FireFox ничего не пишет?

[Маврин]

А как заменить часть селектор кнопки меню заменяли на мой элемент? Объясните пожалуйста как это всё сделать?

[support]

Вот отличная статья про селекторы.

[salt]

Доброе время суток.
У меня такой вопрос по кнопкам меню - возможно ли "скруглить" углы вкладок?
Мой шаблон Мокко.
Спасибо.

[support]

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

		<table>
		  <tr>
			{% FOR menu %}
			  {% FOR header %}
				{% FOR links %}
				  <td {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
					<div>
					  <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>
					</div>
				  </td>
				{% ENDFOR %}
			  {% ENDFOR %}
			{% ENDFOR %}
		  </tr>
		</table>

Вот стили которые выводят это меню из файла main.csstemplate:

/* main navigation ---------------------------------------------------------------- */
#mainNav {position: absolute;left: 5px;bottom: 0;height: 35px;background: url("{ASSETS_IMAGES_PATH}nav_bg.jpg") no-repeat;}
#mainNav table {float:left;border-collapse: collapse;border-spacing: 0;background: url("{ASSETS_IMAGES_PATH}nav_bg_right.gif") no-repeat bottom right;padding: 5px 5px 0 0;height: 30px;margin:auto;}
#mainNav table td {padding:5px 0 0 2px;}
#mainNav table td.first {padding-left: 5px;}
#mainNav table td.last {padding-right: 5px;}
#mainNav table td div {float:left;font-size: 1.25em;line-height: 1.3333em;height: 30px;background: #FFF url("{ASSETS_IMAGES_PATH}nav_item_bg.gif") repeat-x bottom left;}
#mainNav table td div a:link,
#mainNav table td div a:visited {display: block;height: 26px;color: #666;padding: 4px 10px 0 10px;background: url("{ASSETS_IMAGES_PATH}nav_item_bg.gif") repeat-x bottom left;}
#mainNav table td div a.selected,
#mainNav table td div a:hover,
#mainNav table td div a:active {color: #D0431D;text-decoration: none;background-position: bottom right;}

В случае с текущим кодом можно попробовать решить задачу изменяя фоны для стилей

#mainNav table td div {float:left;font-size: 1.25em;line-height: 1.3333em;height: 30px;background: #FFF url("{ASSETS_IMAGES_PATH}nav_item_bg.gif") repeat-x bottom left;}
#mainNav table td div a:link,
#mainNav table td div a:visited {display: block;height: 26px;color: #666;padding: 4px 10px 0 10px;background: url("{ASSETS_IMAGES_PATH}nav_item_bg.gif") repeat-x bottom left;}

, вставляя закругления, но в текущем формате выдачи они должны быть фиксированного размера, что делает их не удобными для работы. Поэтому проще использовать код табов со скруглениями и работать уже с ним.

[eliant]

Помогите мне тоже скруглить углы,  как на картинке. Шаблон Лайт.

[Vaccina]

Скругления углов реализуется 2мя способами. 1й за счет css, 2й за счет изображений.
Самый простой, а иногда самый лучший вариант - это использование css свойства border-radius

Вам необходимо в файл стилей main.css добавить

#mainNav a {
  border-radius: 8px 8px 0 0;
}

[eliant]

Спасибо.

[eliant]

А как сделать на скругленных вкладках контрастную каемочку-рамочку? также как на картинке(синие вкладки-серая каемка)  в моем предыдущем сообщении?

[Vaccina]

Это можно сделать например используя свойство border

Вам необходимо в файле стилей найти

#mainNav {
	background: url("http://img.storeland.ru/web/upload/assets/images/78/77175/nav_bg.jpg") no-repeat scroll 0 0 transparent;
	bottom: 0;
	height: 35px;
	left: 5px;
	position: absolute;
}

заменить на

#mainNav {
	background: url("http://img.storeland.ru/web/upload/assets/images/78/77175/nav_bg.jpg") no-repeat scroll 0 0 transparent;
	bottom: 0;
	height: 35px;
	left: 5px;
	overflow: hidden;
	padding-top: 2px;
	position: absolute;
}

далее найти

#mainNav a {
	border-radius: 10px 10px 0 0;
}

заменить на

#mainNav a {
	border-radius: 10px 10px 0 0;
	border: 1px solid #fff;
	border-bottom: none;
	padding: 7px 10px 12px;
}

Далее необходимо будет изменить цвет #fff на желаемый

[Hyde]

Здравствуйте! Возможно ли поставить вот такое верхнее меню? Что бы при наведении курсором так же менялся цвет. Возможно ли сделать похожий шрифт?
Есть изображение кнопки, куда его вставить что бы все корректно работало?

[Koderhan]

Hyde (07 Февраль 2013 - 16:53) писал:

Здравствуйте! Возможно ли поставить вот такое верхнее меню? Что бы при наведении курсором так же менялся цвет. Возможно ли сделать похожий шрифт?
Есть изображение кнопки, куда его вставить что бы все корректно работало?

Попробуйте изменить стили.
В файле "main.csstemplate".
Найти код:

#mainNav table td div a:hover,
#mainNav table td div a:active {color: #D0431D;text-decoration: none;background-position: bottom right;}

Заменить:

#mainNav table td div a:active {
	color: #D0431D;
	text-decoration: none;
	background: #FFF url("{ASSETS_IMAGES_PATH}nav_item_bg.png") repeat-x top left;
}

[Hyde]

Cпасибо. С этом вроде разобрался.
Есть ли возможность поменять шрифт ( сделать такой же как на картинке). Я так понимаю что с помощью js.
Добавил 2 файла Andantino_script_400.font и Jenna_Sue_400.font. Что нужно что бы они работал?

[support 2.0]

Hyde (09 Февраль 2013 - 17:16) писал:

Cпасибо. С этом вроде разобрался.
Есть ли возможность поменять шрифт ( сделать такой же как на картинке). Я так понимаю что с помощью js.
Добавил 2 файла Andantino_script_400.font и Jenna_Sue_400.font. Что нужно что бы они работал?

Для начала Вам нужно найти этот шрифт в нескольких форматах: otf, ttf, woff, svg. После этого нужно заказать эти шрифты через раздел Сайт -> Редактор тем -> файлы -> потом скопировать адреса этих изображений

Далее в файл main.css нужно будет добавить следующий код

@font-face {
font-family: 'ШРИФТ';
src: url('адрес шрифта.eot');
src: url('адрес шрифта.eot?#iefix') format('embedded-opentype'),
		 url(адрес шрифта.woff') format('woff'),
		 url('адрес шрифта.ttf') format('truetype'),
		 url('адрес шрифта.svg#DefaultBold') format('svg');
font-weight: normal;
}

в нем нужно написать название Вашего шрифта и адреса на этот шрифт в разных форматах.