CSS ile hazırlamış olduğum örnek Animasyonlu menü yapımına makalenin devamında ulaşabilirsiniz.
İçerik
göster
CSS ile Animasyonlu Menü
CSS Kodu
Örnek css kodumuz altta olduğu gibidir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <style type="text/css"> /*Basit CSS Resetleme*/ *{ padding: 0; text-decoration: none; margin: 0; list-style-type:none; } /*Menü Oluşturma Başlangıcı*/ .menu{ text-indent: -1000px; } .menu li{ float: left; height: 50px; background: url(http://i691.photobucket.com/albums/vv273/muratoner/sprites.png) no-repeat; transition:background 0.2s ease; width: 120px; } .menu>li:nth-child(1):hover{ background-position: 0 -50px; } .menu>li:nth-child(2){ background-position: -110px 0; } .menu>li:nth-child(2):hover{ background-position: -110px -50px; } .menu>li:nth-child(3){ width: 100px; background-position: -205px 0; } .menu>li:nth-child(3):hover{ background-position: -205px -50px; } </style> |
Kullanılan css özellikleri
Üstteki css kodlarımız içerisinde kullanılan css özellikleri ve açıklaması.
| CSS Özelliği | Açıklaması |
|---|---|
| padding | iç boşluk |
| text-decoration | metin-şekli |
| margin | dış boşluk |
| text-indent | ilk satır boşluğu verme(satır başı) |
| float | sağa sola yaslama |
| height | yükseklik |
| background | arkaplan |
| transition | geçiş efekti |
| width | genişlik |
| background-position | arkaplan pozisyonu(x-y olarak) |
HTML Kodu
1 2 3 4 5 | <ul class="menu"> <li><a href="link buraya verilecek">Ana Sayfa</a></li> <li><a href="link buraya verilecek">Hakkımızda</a></li> <li><a href="link buraya verilecek">İletişim</a></li> </ul> |
Sonuç
Sonucu görmek için alttaki ‘Result’ sekmesine tıklamalısınız.
