Webmaster Forumu - Webmaster Zone

Geri git   Webmaster Forumu - Webmaster Zone > Webmaster Zone > Programlama Dilleri > HTML CSS DHTML
Şifrenizimi Unuttunuz? Bize Katılın!

Cevapla
Görüntüleme: 412 - Cevaplar: 0  
LinkBack Seçenekler Stil
  #1 (permalink)  
Alt 11-05-2008, 21:32:51
OmAr OmAr isimli üyemiz çevrimdışıdır. (Offline)
Webmaster
No Status
 
Üyelik tarihi: 31/5/2008
Nerden: Konya
Mesajlar: 31
iTrader: (0)
Tecrübe Puanı: 14
Puanları: 20
OmAr üyemiz henüz acemi
OmAr - MSN üzeri Mesaj gönder
Standart 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 FrmHits' de 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
Alıntı ile Cevapla
Cevapla



Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Seçenekler
Stil

Yetkileriniz
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-KodlarıKapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık

Benzer Konular
Konu Konuyu Başlatan Forum Cevaplar Son Mesaj
Buton Yaratıcısı CYBERAY Vbulletin 6 08-11-2008 12:46:08
GNU/Linux işletim sistemleri üzerinde aktif diskleri görme, disk aktif ve pasif etme Tahsin ALTAY Linux 1 03-03-2008 22:58:36
Tıklayınca aktif olan buton Saga Programlama Dilleri 8 27-10-2007 13:31:00
Tıklayınca değişen buton? xlargex Webmaster Genel 1 18-05-2007 13:42:28
Buton Yapımı Alone Flash, Director, Swift ve 3D 4 07-01-2007 21:05:29


oyun , kontör , türkçe dizin

Bütün Zaman Ayarları WEZ +2 olarak düzenlenmiştir. Şu Anki Saat: 22:12:48 .


Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO 3.1.0
Zone Org | 2006-2008

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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125