вЭлементы дизайна Юкоз

Социальные иконки выезжают для uCoz

Уже трудно представить сайт, на котором нет социальных закладок. Здесь только Русский набор кнопок, которые при наведение клика выезжают и появляются полностью. Теперь вам не нужно рисовать их или создавать, все готовый для этого скрипт есть. Вы можете его разместить, так где вы сами хотите или видите. Сам он не сложный, только нужно скачать папку и закинуть в корень сайта и прописать код.

Там где видите на сайте их.

Код
<div class=»menu»>
<i><a href=»адрес ссылки» ><img src=»/soc_icons/vkontakte.png» alt=»Vkontakte»class=»icon»></a></i>
<i><a href=»адрес ссылки» ><img src=»/soc_icons/twitter.png» alt=»Twitter»class=»icon»></a></i>
<i><a href=»адрес ссылки» ><img src=»/soc_icons/google_plus.png» alt=»Google»class=»icon»></a></i>
<i><a href=»адрес ссылки» ><img src=»/soc_icons/facebook.png» alt=»Facebook»class=»icon»></a></i>
<i><a href=»адрес ссылки» ><img src=»/soc_icons/odnoklassniki.png» alt=»Ok»class=»icon»></a></i>
<i><a href=»адрес ссылки» ><img src=»/soc_icons/linkedin.png» alt=»Linkedin»class=»icon»></a></i>
<i><a href=»адрес ссылки» ><img src=»/soc_icons/youtube.png» alt=»Youtube»class=»icon»></a></i>
<i><a href=»адрес ссылки» ><img src=»/soc_icons/rss.png» alt=»Rss»class=»icon»></a></i>
</div>

Вставьте в таблицу стилей CSS

Код
.menu
text-align: center;
height: 60px;
overflow: hidden;
cursor: default;

.menu i
position: relative;
top: 30px;
transition: .2s ease;

.menu i:hover
top: 9px;

.icon
border-radius:10px;

Но для начало, загрузку производим, скачиваем архив и все в папку soc_icons корень сайта, если нет такой, то создается.

источник: Internetempire.ru

Похожие посты