Стильное плавающее меню на CSS3

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

Для реализации применяется эффект тени (shadow) и анимация (transition). В стилях это прописано непосредственно для пунктов списка li (для разных браузеров своя запись):

Начнем

Вставим этот код в наш CSS файл

Code
#menu {
margin: 1em auto 0 auto;
}  
#menu li {
list-style-type: none;
margin: 0 0 5px;
font-size: 15px;
background: #ccc;
padding: 10px;
-webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
-moz-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
-webkit-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
}
#menu li:hover {
margin-left: -1em;
margin-right: 1em;
background: #fff;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
box-shadow: 0px 0px 10px rgba(0,0,0, .3);
}


Теперь пропишем сам код нашей навигации

Code
<ul id="menu">
<li><a href="http://get-element.3dn.ru/load/rss/"> Подпишись на RSS</a></li>
<li><a href="http://get-element.3dn.ru/load/rss/"> RSS на E-mail</a></li>

<li><a href="http://twitter.com/"> Мой Twitter</a></li>
<li><a href="http://www.facebook.com/"> Мой Facebook</a></li>
</ul>


Работает фишка в Safari 5, Chrome 5.0, Opera 10.53 и Firefox 3.6(здесь кроме анимации).

  • FalleN

  • 4506

  • 1

  • 0

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!