12-13-2013, 03:53 PM
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>
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;
}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...
+ rep lerinizi esirgemeyınız tşk yerine geçer
Alıntıdır.
Okyanusta batan gemidir yalnızlık,
Çok derinlerdedir gücün yetmez onu oradan çıkarmaya.
Kaybolup gider daha sonra.
Kendi kendine konuşmaktır yalnızlık...
Belkide en iyi tarafıdır bu
Kendini sorgularsın, bir kez olsun çekersin köşeye nefsini hayatı anlamaya çalışırsın.
Çok derinlerdedir gücün yetmez onu oradan çıkarmaya.
Kaybolup gider daha sonra.
Kendi kendine konuşmaktır yalnızlık...
Belkide en iyi tarafıdır bu
Kendini sorgularsın, bir kez olsun çekersin köşeye nefsini hayatı anlamaya çalışırsın.
