Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj12.08.2011, 17:20 (UTC)    
Mesaj konusu: CSS ile Aktif Menü Buton Yapımı

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
Kod:
<a href="#" class="ana_sayfa"></a>

linklerimizi de hazırladık şimdi geçelim css kısmına ve ilk kodumuza
Kod:
.ana_sayfa {
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
Kod:
a.ana_sayfa {
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
Kod:
a:hover.ana_sayfa {
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
______________
@tr.gg dısı link yasak
Mesaj12.08.2011, 17:46 (UTC)    
Mesaj konusu:

güzelmiş Wink
______________
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu