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>
<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
.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
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
.menu ul li {
float: left;
margin-right: 2px;
}
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
.menu ul li a {
display: block;
width: 48px;
height: 58px;
}
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ı
.menu ul li a span {
visibility: hidden;
}
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;}
.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;
}
background-position:0 -58px;
}
Buyrun buda bitmiş halindeki kodu
