Навигация с картинками ModBlackmoon

На самом деле не так уж и сложно, за то смотрится красиво. Сначала в свободный блок html, а потом эффекты в css.


HTML

<ul id=«my_menu»>
<p><a href=«ссылка на блог»><img src=«s4.hostingkartinok.com/uploads/images/2013/06/abdd77e051ea20d6d4d3ea7dde8827c3.png» /></a><a href=«ссылка музыка»><img src=«s2.hostingkartinok.com/uploads/images/2013/06/57e2c9a9c84b797d406402babb95d83a.png» /></a><a href=«ссылка избранное»><img src=«s4.hostingkartinok.com/uploads/images/2013/06/f51e7c337806f1608deb632d72659a90.png» /></a><a href=«ссылка контакты»><img src=«s5.hostingkartinok.com/uploads/images/2013/06/8e9f230fb11fee8d874f116c06f4b289.png» /></a></p>
</ul>

CSS

Сначала зададим позицию, хотя это необязательно.

#my_menu {float: right; margin-right: 135px;}

Теперь самое-самое. Эффект для пункта меню — картинки.

#my_menu img{padding: 2px;

    -moz-transition: all 2s 0.1s ease-in;

    -o-transition: all 2s 0.1s ease-in;

    -webkit-transition: all 2s 0.1s ease-in;

    cursor: pointer;}

#my_menu img:hover {

    -webkit-transform: rotate(-360deg);

    -moz-transform: rotate(-360deg); 

    -o-transform: rotate(-360deg); }

Всем удачи! )
Обсудить у себя 10
Комментарии (4)

Cпасибо))

Очень красиво)

а  у меня не вышло(зайдите ко мне гляньте плиз)вроди всё правильно сделала

одно из двух
1 — дело в ссылках. сохрани иконки себе на комп, перезалей их куда-нибудь типа hostingkartinok.com и замени ссылки
2 — ты неправильно вставила html в свободный блок (такое у многих бывает)

скорее всего первое

Чтобы комментировать надо зарегистрироваться или если вы уже регистрировались войти в свой аккаунт.

Войти через социальные сети: