Blackinci » CSS » Css Balon Büyüyen Menü

(Oy Verenler: 14)

Css Balon Büyüyen Menü

1019 Kere Okunmuş

CSS blackinci 29 Nisan 2008 Haberi Yazdır

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="#">Arama</a></li>
 <li><a class="indir" href="#">İndir</a></li>
 <li><a class="bilgi" href="#">Bilgi</a></li>
 <li><a class="kalp" href="#">Kalp</a></li>
 <li><a class="cark" href="#">İşlem</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: 126)

Bu Konuda 11 Yorum Yapılmış
Bu Konuda 11 Yorum Yapılmış

	ByResul	30 Nisan 2008 14:04 Alıntı Yap #1
çok güzel bir paylaşım Tüm WebMasterlerin İşine Yarar

	Arno	3 May 2008 18:09 Alıntı Yap #2
Çok kral olmuş abi :) Eline sağlık...

	mk_i	27 May 2008 22:04 Alıntı Yap #3
Çok teşekkürler gerçekten çok kral olmuş.

	Cezam	30 May 2008 15:57 Alıntı Yap #4
usta çok süper menü eline sağlık.fakat bunu ortalayamadım :S yardımcı olabilir misin ?

	blackinci	30 May 2008 20:35 Alıntı Yap #5
bu menü ortalanmaya müsayit değil ortalanır ama uğraştırır uğraşmadan kolayca nasıl ortalarsınız iframe ile ortalarsınız en kolayı bu olur

	ßaHaDıR28	31 May 2008 16:06 Alıntı Yap #6
Harika çok saol...

	GececiSezgin	5 Haziran 2008 18:00 Alıntı Yap #7
pst leri düzenledim oluyomu die denedim süper oldu teşekkür ederim ellerine sağlık süper anlatımlar

	DaNGeR	8 Haziran 2008 09:54 Alıntı Yap #8
Çok Güzel Hoş oluyor.TeşekkürLer.

	byesrarengiz	10 Haziran 2008 18:08 Alıntı Yap #9
black inci gerçekten teşekkürler güzel bir ders anlatmışsın. Cezam, Kardeş ortalayabilirsin bunda bişi yoq. <table class="body"> <tr> <td><div class="menu"> <ul> <li><a class="ara" href="#"><span>Arama</span></a></li> <li><a class="indir" href="#"><span>İndir</span></a></li&g t; <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></td> </tr></table> kısmını bu şekilde düzenle css kısmınada .body { margin:40 490; } eklersen istediğin gibi ortalanmış olur Yayında ve yapımda emeği geçenlere çok teşekkür ederim.

	Koray	20 Haziran 2008 00:35 Alıntı Yap #10
Konuyu okudum ve bir teşekkür etmeden gidersem kendime çok kızardım. Anlatım için teşekkürler.