Css Balon Büyüyen Menü - Webmaster Forumu

OmAr · #1 (**permalink**) 11-05-2008, 21:22:10

Evet münümüzü yapmaya başlayalım ilk olarak HTML kısmını yazalım

Kod:

<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

evet HTML kısmı bukadar geçelim css kısmına ilk kodlarımızı yazmaya başlayalım

Kod:

.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

kodlarımızı yazmaya devam edelim

Kod:

.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

evet devam edelim

Kod:

.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ı

Kod:

.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

Kod:

.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

devam ediyoruz

Kod:

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...

Bu menüyü bilgisayarıma kaydet
balon-menu.rar [93.61 Kb] (İndirme: 17)Evet münümüzü yapmaya başlayalım ilk olarak HTML kısmını yazalım

Kod:

<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

evet HTML kısmı bukadar geçelim css kısmına ilk kodlarımızı yazmaya başlayalım

Kod:

.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

kodlarımızı yazmaya devam edelim

Kod:

.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

evet devam edelim

Kod:

.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ı

Kod:

.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

Kod:

.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

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...

Bu menüyü bilgisayarıma kaydet
balon-menu.rar [93.61 Kb]

Yardımlarından ötürü Blackinciye sonsuz teşekkürler...

AycanB · #2 (**permalink**) 11-05-2008, 21:37:16

Tşkler css olmazsa hiç bişiy olmaz

OmAr · #3 (**permalink**) 11-05-2008, 21:56:34

Evet arkadaşım hiç bir şey olmaz. Ben 5 yıldır kendimi CSS ye adıyorum. İnşallah arşivimden güncel, yararlı çalışmalarımı sizlere sunacağım

acidmax · #4 (**permalink**) 12-05-2008, 08:42:34

Eminim birçok kişinin işine yarayacaktır. Ayrıca sitenin adresini de verelim, Blackinci Kişisel Web Sayfası

Bilgiler için teşekkürler

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder
Stil
Normal Hybrid-Şeklinde gösterime geç Ağaç şeklinde gösterime geç

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
AÇilir MenÜ ??	chernobil	Webmaster Genel	15	25-04-2008 00:12:58
css ile menü	ekin3105	Arama Motoru Optimizasyonu	2	15-04-2008 08:47:29
görünmez menü	ekin3105	HTML CSS DHTML	1	03-04-2008 13:27:24
Süper Bir Menü	Alone	HTML CSS DHTML	1	23-06-2007 16:49:31

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