Ana Sayfa

Blackinci » CSS » Css Balon Büyüyen Menü
Üye Paneli

Kayıt Ol Şifremi Unuttum?


Give Me Everything

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

«    Nisan 2008    »
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
 


blackinci.com da bir forum sayfası olsun mu?
Evet Olsun
Hayır Olmasın
Kararsızım
Fikrim yok

admin paneli, ajax, background, css, CSS3, dle, F1, form, forum, giris paneli, gölge, gölgeli yazı, highslide, iphone, md, mybb, mybbdestek, novaboard, oval, Seri 5, seri2, tasarim, tema, transform, vbulletin, Yarış, özellik

Eylül 2010 (4)
Ağustos 2010 (1)
Haziran 2010 (1)
Mart 2010 (4)
Şubat 2010 (2)
Ocak 2010 (1)
Makale Detayları
blackinci
29 Nisan 2008
CSS
Yazdır
10440 Kez Okunmuş
31 Yorum Yapılmış
 (Oy Sayısı: 23)


Benzer Konular

Css Balon Büyüyen Menü
Css Balon Büyüyen Menü

Evet münümüzü yapmaya başlayalım ilk olarak HTML kısmını yazalım
<div class="menu">
    <ul>
        <li><a class="ara" href="#"><span>Arama</span></a></li>
        <li><a class="indir" href="#"><span>İndir</span></a></li>
        <li><a class="bilgi" href="#"><span>Bilgi</span></a></li>
        <li><a class="kalp" href="#"><span>Kalp</span></a></li>
        <li><a class="cark" href="#"><span>İşlem</span></a></li>
    </ul>
</div>

Üstteki görüldüğü gibi bir "DİV" elementi oluşturduk ve bir class atadık içine bir liste oluşturalım ve bu liste içerisine "A" elementini yazdık ve birer class atadık son olarak "SPAN" elementi içerisine linklerimizin isimlerini yazdık Bakalım nasıl görünüyorlar
Css Balon Büyüyen Menü

evet HTML kısmı bukadar geçelim css kısmına ilk kodlarımızı yazmaya başlayalım
.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

üstteki yazdığımız kodda ilk olarak "UL" elementimizin yani listemizin simge göstermesini istemedik ve boşlukları sıfırladık
görelim bakalım ne durumda menümüz
Css Balon Büyüyen Menü
kodlarımızı yazmaya devam edelim
.menu ul li {
    float: left;
    margin-right: 2px;
}

üsteeki yazdığımız kodda menümüzün "Lİ" elementini sola yasladık bunun listemizin yatay olarak sıralanması için yaptık ve listelerimizin sağ kısmına 2 şer pixellik boşluk verdik duruma bakalım
Css Balon Büyüyen Menü
evet devam edelim
.menu ul li a {
    display: block;
    width: 48px;
    height: 58px;
}

üstteki kodumuzda ise "A" elementine blok görünümü özelliği verdik bu görünümü istediğimiz genişlik ve yükseklik değeri verebilmemizi sağladı ve hazırladığımız resimlere göre genişliği ve yüksekliği belirledik
görünüm alttaki gibi istediğimiz kıvama gelmeye başladı
Css Balon Büyüyen Menü
.menu ul li a span {
    visibility: hidden;
}

bu kodda ise "SPAN" elenementini görünmez yaptık hazırladığım imajlar zaten menü isimleri yazıyordu yani yazmasakta olurdu fakat başta google olmak üzere diğer arama motorlarının robotları bu yazıyı okumasını istiyoruz onun için yazık ekranda görünmüyecek ama örümcekler okuyabilecek devam edelim
.ara {background: transparent url(ara.png) 0 0 no-repeat;}
.indir {background: transparent url(indir.png) 0 0 no-repeat;}
.bilgi {background: transparent url(info.png) 0 0 no-repeat;}
.kalp {background: transparent url(kalp.png) 0 0 no-repeat;}
.cark {background: transparent url(cark.png) 0 0 no-repeat;}

üstteki kodumuzda ise "A" elementine atadığımız class lara arka plan resimi veriyoruz hepsine tek tek ayrı verdik menü resimleri farklı olduğu için örnek resim altta
Css Balon Büyüyen Menü
devam ediyoruz
a:hover.ara, a:hover.indir, a:hover.bilgi, a:hover.kalp, a:hover.cark {
    background-position:0 -58px;
}

üstteki kodumuzda ise son olarak fare mizi menü ikonun üstüne getirince hazırladığımız resimin alttaki kısmını ekranda gösteriyoruz ben boyutları aynı olduğu için hepsini birleştirdim imajları örnek olarak yaptım bilgisayarımda bulduğum en uygun resimler bunlardı aslında ben yinede PSD sini ekliyorum belki size yardımcı olur hoşcakalın...
Örnek - Ön İzleme
Bu menüyü bilgisayarıma kaydet
balon-menu.rar [93.61 Kb] (İndirme: 1263)
30 Nisan 2012 22:38 31Kadir Kaya demiş ki:
Facebook un tasarımı senin sitenin tasarımının yanında halt yemiş hatta dünyanın bütün siteleri halt yemiş smile
5 Mart 2011 23:14 30escaperx demiş ki:
Teşekkürler. Paylaşımların çok güzel..
30 Ekim 2010 18:35 29blackinci demiş ki:
blackteam,
.menu ul li {
float: left;
margin-right: 2px;
}
buraya display: inline; kodu ekleyin test edemedim ama çözüm olabilir
18 Ekim 2010 19:59 28blackteam demiş ki:
selam blackinci kardeşim ben bunu siteme entegre ettim ama bi sorunum var ie8 'in altındaki sürümlerde alt alta çıkıyor ne yapabiliriz ?
20 Temmuz 2010 12:31 27bugrahan demiş ki:
Çok işime yaradı çok sağolun.Süper bir site! lol
7 Şubat 2010 01:28 26tuncer demiş ki:
blackinci teşekür ederim bu css menülerden birini php nukede kullandım elinize sağlık güzel işler çıkarmışsınız menüler göz alıyor

php nuke ccs menü örneği
30 Ocak 2010 18:57 25blackinci demiş ki:
.menu ul li {
float: left;
margin-right: 2px;
}

Yukarıdaki float:left kodunu silerseniz alt alta sıralanırlar
30 Ocak 2010 17:19 24tuncer demiş ki:
bu menüyü yatay değilde dikey olarak nasıl sıralarız
24 Temmuz 2009 23:00 23nskmr demiş ki:
blackinci, sana güvenim tam, inşallah bu tür aksilikler tekrar başına gelmez.
24 Temmuz 2009 21:12 22blackinci demiş ki:
nskmr,

Aslında hepsini temizledim sanıyordum ama birtek orda kalmış onuda temizledim gönül rahatlığı ile girebilirsiniz bir kaç gün içinde uyarı kalkar
◄ Geri 1 2 3 4 İleri ►

Sessiz Kalma Sende Yorum Yap

Son Yapılan 10 Yorum
  • Konu
  • Yazar
  • Yorum
  • CSS3 Kutu Elementlerine Gölge Verme Box ...
  • demiş ki 
  • çok sağol üstad çok güzel anlatım olmuş. :)
  • Blackinci Seri 5 MyBB teması
  • blackinci demiş ki 
  • tamer,
    Resim görebilirsem daha yardımcı olurum
  • Blackinci Seri 5 MyBB teması
  • tamer demiş ki 
  • hocam temanın çok başarılı fakat saol taraf boşlukda sosyal medya yazısı çıkıyor bunu nasıl kaldırabilirim
  • Css ile Aktif Menü Buton Yapımı
  • blackinci demiş ki 
  • Webmaster,
    Ben daha önce bir defa mybb için ücretli tema hazırladım ama hiç satmadan tekrar ücretsiz olarak dağıttım şuan için soruyorsanız mybb yi bıraktım... başka bir forum sistmei ile ilgileniyorum.
    Kendiniz bir fiyat biçmek adına bilgi edinmek için soruyorsanız bu yaptığınız grafiklere, yazdığınız kodlara ve harcadığınız emeğe göre değişir ama şuan için ücretli tema yapmanızı tavsye etmem zira mybb nin vbulletin gibi ücretli olacağı dedikoduları dolaşıyor eğer bu gerçekleşirse işte ozaman güzel olur ve ücretli temaların önü açılmış olur ozaman daha rahat ve güvenilir tema hazırlayıp satabilirsiniz iyi günler.
  • Css ile Aktif Menü Buton Yapımı
  • Webmaster demiş ki 
  • Merhabalar
    Blackinci MyBB temalarını ücretli olursa ne kadar ücrete hazırlıyorsunuz? Buradan belirtirseniz sevinirim
    İyi günler
  • Css ile Aktif Menü Buton Yapımı
  • blackinci demiş ki 
  • Kadir Kaya,
    Bedava forum sistemi sunun sitelerin sistemi nasıl işliyor bilemiyorum ama gözükmemesi normaldir bu tür siteler çok kısıtlı çalışırlar.
  • Css Balon Büyüyen Menü
  • demiş ki 
  • Facebook un tasarımı senin sitenin tasarımının yanında halt yemiş hatta dünyanın bütün siteleri halt yemiş smile
  • Css ile Aktif Menü Buton Yapımı
  • demiş ki 
  • Usta emeğine sağlık ama tr.gg sitelerinde ve jindo.com sitelerinde çalışmıyor hatta hiç gözükmüyor niye anlayamadım.
  • Blackinci vBulletin Teması Seri 1
  • demiş ki 
  • Saol Güzel :)

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

Copyright © 2007 - 2011 DLE Blackinci Edition Seri 2