|
|
||
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 <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 } 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; } 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; } 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 Örnek Ön İzleme için Buraya Tıklayınız |
||
12 Ocak 2010 20:18 33FeeLTheFeaR demiş ki: blackinci, peki teşekkürler |
||||
12 Ocak 2010 06:27 31FeeLTheFeaR demiş ki: kendi menünü paylaşıyormusun? |
||||
14 Eylül 2009 23:47 30crazy_vefa demiş ki: yaw hocam senin indexteki gibi yapmak istiyorum ben böyle yavaş geçişli, nasıl yaparım |
||||
14 Eylül 2009 22:35 29forumsefasi demiş ki: pardon görmemişm orayı birde css3 ne zaman çıkar tahmin edebilirmisiniz |
||||
14 Eylül 2009 20:45 27forumsefasi demiş ki: birde sitenize ömizleme seçeneği yapılsa daha iyi olur |
||||
13 Eylül 2009 20:36 26forumsefasi demiş ki: diyorumki ben bir site tasarladım içine multicolor css ekledim 5-6 adet örnek olarak kırmızı bastıklarında butona verdiğim css nasıl aktif olur bi nevi multicolor html'de nasıl yapılır |
||||
13 Eylül 2009 19:56 25ByResul demiş ki: forumsefasi, söylediklerinden hiç bir şey anlaşılmıyor ki yardım edelim. tane tane istersen resimle anlat. |
||||
13 Eylül 2009 18:52 24forumsefasi demiş ki: peki ben hmtlyi multi yapmayı çalışıyoum butona basınca nasıl diğer cssnin özeliklerilerni alabilir mybb deil html mybb ye baktım ordan biraz yapmaya çalılştım olmadı |
||||
| Son Yapılan 10 Yorum | ||
|
||
|
Yukarı
İletişim
RSS Takip
İstatistikler
Site İçeriği
Copyright © 2007 - 2010 DLE Blackinci Edition Seri 2 |