Ali Mengü | Kişisel Web Sayfasi

Menu Kategori Basliğina İcon Eklemek

Uzun Bir aradan sonra Bir Dersle daha karsınızdayım arkadaslar.Bu Dersimizde Menulerin Kategori Başlıgı kısmında Değiştirilebilir İcon Eklemeyi Göstericem.

Örnek olarak hazırladığım Bir Kategori Basliği Asağıdadir.


(Boyutlar ; 240x32)


Arkadaslar Önce Bir Katman Oluşturalim.Katmanimizin İsmine mavibaslik adini veriyorum.Siz İstediğiniz Bir isim takabilirsiniz.Css Kodlariyla Beraber Katman Kodlari Asağıdadir.

Görünüm ;

Kod;
<style type="text/css">
<!--
#mavibaslik {
    background-image: url(https://img.webme.com/pic/a/alimengu/temsiliresim.png);
    height: 32px;
    width: 240px;
}
-->
</style>
<div id="mavibaslik"></div>

Gördüğünüz gibi Basliğimizin temeli oluştu.Şimdi içinde bir class oluşturuyoruz. Classin ismini maviicon olarak ayarliyorum.Siz Baska bir isim verebilirsiniz.Classin boyutlarini height; 32px width;32px  olarak ayarliyorum.Classi Katman içerisinde sola yatirmak içinde float:left; kodunu kullaniyorum.Katmanin Sol kısmından uzakliği içinde margin-left:10px; değerini veriyorum.Simdi bu islemlere göre önizlemeyi ve kodumuzu görelim.

Görünüm ;

Kod;
<style type="text/css">
<!--
#mavibaslik {
    background-image: url(https://img.webme.com/pic/a/alimengu/temsiliresim.png);
    height: 32px;
    width: 240px;
}
.maviicon {
    float: left;
    height: 32px;
    width: 32px;
    margin-left: 10px;
}
-->
</style>
<div id="mavibaslik">
  <div class="maviicon"></div>
</div>

Gördügünüz gibi İconun geliceği yer küçük bir kare halini aldi.Benim kullandiğim ve size önerdiğim iconfinder sitesinden katmanimiza uygun icon bulalim ve yerine yerleştirelim.

Ekleyeceğim icon : 

Bu kısım çok kolaydir üzerinde fazla durmayacağım.Mavi icon adli classmiza resmin kodunu ekliyoruz.
<img alt="http://cdn1.iconfinder.com/data/icons/general11/png/32/home.png" src="http://cdn1.iconfinder.com/data/icons/general11/png/32/home.png">

Görünüm ;

Kodlar ;
<style type="text/css">
<!--
#mavibaslik {
    background-image: url(https://img.webme.com/pic/a/alimengu/temsiliresim.png);
    height: 32px;
    width: 240px;
}
.maviicon {
    float: left;
    height: 32px;
    width: 32px;
    margin-left: 10px;
}
-->
</style>
<div id="mavibaslik">
  <div class="maviicon"><img alt="http://cdn1.iconfinder.com/data/icons/general11/png/32/home.png" src="http://cdn1.iconfinder.com/data/icons/general11/png/32/home.png"></div>
</div>

Şimdi Kategori İsmini Yerleştirelim.Burada Padding Kodlarini kullanicaz.Bir Class oluşturalim. ben ismini maviyazi olarak belirledim.Bu classi mavi baslik katmanin içine açıyoruz.Ayni mavi icon classi gibi.Ardindan font değerini ve Yazi boyutunu ayarliyoruz.Ben Yazi Stilini Verdana Olarak ayarladim. Yazi büyüklüğünüde 16px; olarak ayarladim. Yazinin sol kısımdan uzakliği için 60px üst kısımdan uzakliği için 6px değerini verdim. Şimdi kodu ve görünümü görelim.

Görünüm ;

Kod ;
<style type="text/css">
<!--
#mavibaslik {
    background-image: url(https://img.webme.com/pic/a/alimengu/temsiliresim.png);
    height: 32px;
    width: 240px;
}
.maviicon {
    float: left;
    height: 32px;
    width: 32px;
    margin-left: 10px;
}
.maviyazi {
    font-family: Verdana;
    padding-left: 60px;
    padding-top: 6px;
    font-size: 16px;
}
-->
</style>
<div id="mavibaslik">
  <div class="maviicon"><img alt="http://cdn1.iconfinder.com/data/icons/general11/png/32/home.png" src="http://cdn1.iconfinder.com/data/icons/general11/png/32/home.png"></div>
  <div class="maviyazi">Baslik &#304;smi Buraya</div>
</div>

Ve İşte Katmanimiz ;