Css Aktif Menu Yapma
Menülerimizi yaparken hep güzel bişey olsun isteriz Güzel olsunlarki ziyaretcilerimiz sitemizi beğensinler tabiki artık bir çok hazır menüler var bir çoğuda güzel tabi kendimizde bu şekilde güzel menüler oluşturabiliriz Forum Temada bu menüyü kullanmıştım ziyaret edenler bilir orada kullandığım menü butonlarının aynısını anlatıcam
Tabi öncelikle bir grafik programı kullanmamız gerekiyor photoshop gibi
hazırlamamız gereken butonların önce yüksekliğini ayarlamamız gerekli yani sitemizde kullanıcağımız yükseklik nekadar olmalı ve yüksekliğimiz çift rakam olmalı örnek 30 pixel burada ben örnek uygulamada 30 pixel kullandım elbette bu değiştirilebilir size kalmış tek rakam olmamasına dikkat edin.
İlk olarak 30 pixel yüksekliğinde bir menümüz olacak ama biz butonu hazırlarken 60 pixel olarak çalışacağız
yani 30 pixel normal görünüm 30 pixlde aktif görünüm örnek alttaki resim
Resmimizi hazırladık şimdi kullanacağımız kodlara geçelim
ilk olarak linklerinizi belirlemenizde yarar var linkleri belirlerken hepsine ayrı olarak birer class atıyoruz örnek
<a href="#" class="ana_sayfa"></a>
linklerimizi de hazırladık şimdi geçelim css kısmına ve ilk kodumuza
.ana_sayfa {
width: 120px;
height: 30px;
background: url(ana_sayfa.png) top left no-repeat;
float: right
}
width: 120px;
height: 30px;
background: url(ana_sayfa.png) top left no-repeat;
float: right
}
yukardaki kodumuzda genişlik ve yükseklik değeri verdik butonumuzu oluşturan arkapan resmi verdik ve sağa yasladık geçelim ikinci kodumuza
a.ana_sayfa {
display: block;
width: 120px;
height: 30px;
background: url(ana_sayfa.png) top left no-repeat;
text-decoration: none;
}
display: block;
width: 120px;
height: 30px;
background: url(ana_sayfa.png) top left no-repeat;
text-decoration: none;
}
Yukarıda ki kodumuzda bir önceki kodda olmayan blok kodumuz var bu kod butonumuzun can damarı son kodumuza geçelim
a:hover.ana_sayfa {
background-position:0 -30px;
text-decoration: none;
}
background-position:0 -30px;
text-decoration: none;
}
Son Kodumuzda arka plan resmimizi yukarı çektik butonumuzun üstüne gelince aktif olması için
bu butonun diğer menülerden farkı aktif yani üsütne gelince tarayıcının tekrar resim yüklememesi zaten bir resimi iki kere kullanıyoruz sadece pozisyonları ile oynuyoruz o yüzden tarayıcı hem normal hemde aktif resimi yüklemiş oluyor Ve İE6 dahil denediğim butun tarayıcılarda sorunsuz çalışıyor
Kolay gelsin sitelerinizin menülerinizi güzelleştirin
Bitmiş halinin kodları ;
