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

[Stas_Y]

Добрый вечер! Подскажите насколько сложно сделать так http://codepen.io/Sejul/pen/CuhDF

[Vaccina]

JS в данном случае не используется, все на чистом css можно сказать, уточните пожалуйста, на каких кнопках вы хотите использовать данный эффект?

[Stas_Y]

Для menu.header, при этом его стандартную стилистику убрать))

[Vaccina]

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

<ul class="top-navbar-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 %}
					</ul>

замените на:

<ul class="top-navbar-links">
					  {% FOR menu %}
						{% FOR header %}
						  {% FOR links %}
							<li><div class="svg-wrapper"><svg height="40" width="120" xmlns="http://www.w3.org/2000/svg"><rect class="shape" height="40" width="120" /><div onclick="window.location='{menu.header.links.URL}'" class="text {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</div></svg></div></li>
						  {% ENDFOR %}
						{% ENDFOR %}
					  {% ENDFOR %}
					</ul>

далее в main.css найдите(210):

.header-top .header-top-left .top-navbar-links li:hover a {color: #fff;text-decoration: none;}

после него вставьте:

.svg-wrapper {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
  width: 120px;  
}
.svg-wrapper .shape {
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width: 8px;
  fill: transparent;
  stroke: #19f6e8;
  border-bottom: 5px solid black;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.svg-wrapper .text {
	font-size: 14px;
	line-height: 0px;
	color: #000;
	top: -20px;
	position: relative;
	text-align: center;
}
.svg-wrapper:hover .shape {
  stroke-width: 8px;
  stroke-dashoffset: 0;
  stroke-dasharray: 760;
}

[Stas_Y]

Что-то пошло не так((

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

• 

[Vaccina]

Почистите кэш браузера, так обновите его, если он ниже 11 версии. В самом ie отображение в целом одинаково, но эффект не работает даже в примере, тут уже все зависит от поддержки браузером. проверьте эффект в другом браузере.

[Stas_Y]

Проверил работает в яндексе)) но наряду с этим оранжевая анимация тоже))

[Vaccina]

Для этого в main.css найдите и удалите:

.header-top .header-top-left .top-navbar-links li:hover {
	background-color: #F79242;
}

[Stas_Y]

Теперь пропал эффект)

[Ирина345]

Stas_Y (16 Сентябрь 2015 - 07:35) писал:

Теперь пропал эффект)

Здравствуйте, уточните о каком эффекте вы спрашиваете.

[Stas_Y]

Эффект не работает на ie, поэтому не то это(