Blackinci » CSS » Css ile Aktif Menü Buton Yapımı

CSS Hayat İşte Genel Photoshop MyBB Temalar Özgür Yazım

«    Mart 2010    »
PtSaÇrPrCuCtPz
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
 

Üye Giriş Paneli Tas... CSS3 Kutu Elementler... NovaBoard Tanıtım Te...

2. Versiyon Temasını Nasıl Buldunuz?
Mükemmel
Çok İyi
İyi
Eh İşte
Beğenmedim

admin paneli, ajax, css, dle, form, forum, giris paneli, gölge, gölgeli yazı, highslide, iphone, md, mybb, mybbdestek, novaboard, seri2, tasarim, tema, vbulletin, özellik

Mart 2010 (1)
Şubat 2010 (2)
Ocak 2010 (1)
Ekim 2009 (1)
Eylül 2009 (2)
Ağustos 2009 (1)

Css ile Aktif Menü Buton Yapımı

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
Css ile Aktif Menü Buton Yapımı
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 fellow
Ö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 18:54 32blackinci demiş ki:
Hayır paylaşmıyorum

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 21:22 28blackinci demiş ki:
Ön izleme demosu mevcut zaten

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ı


Sessiz Kalma Sende Yorum Yap

Son Yapılan 10 Yorum

Yukarı İletişim RSS Takip İstatistikler Site İçeriği

Copyright © 2007 - 2010 DLE Blackinci Edition Seri 2