Css İle Yatay Menü Yapımı 2
18 May 2008. Yazar: blackinci
Evet ilk yatay menüm forumtema.com da kullandığım menü idi ondan sonra bir menü daha yapmak geldi içimden
bu ilkinden biraz farklı ve yapmışken 5 tane de renk olsun istedim ve içine 5 tanede renk koydum belki kullanan olur yada örnek alıp bişeyler yapan menü yapımına geçelim isterseniz.
İlk olarak herzamanki gibi html kodlarımız ile başlayalım
<div id="gri">
<ul>
<li><a href="#" class="aktif">Ana Sayfa</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Bilgi</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Hakkında</a></li>
</ul>
</div>
<ul>
<li><a href="#" class="aktif">Ana Sayfa</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Bilgi</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Hakkında</a></li>
</ul>
</div>
Yukarıda bir layer içerisine sıralı liste oluşturduk ve linklerimizi ekledik linklerimize birtane "class" var ismi aktif layerimizin adı da gri olsun ben renk renk yaptığım için renk ismi verdim css kodlarımızı yazmaya başlayalım
#gri ul {
margin:0;
padding:0;
list-style-type:none;
width:100%;
background:transparent url(img/menu_gri.png) top left repeat-x;
font-family:Verdana,Arial,sans-serif;
font-weight:bold;
font-size: 12px;
border: 1px solid gray;
height:30px!important;
height:32px; /*İE6 için*/
overflow:hidden;
}
margin:0;
padding:0;
list-style-type:none;
width:100%;
background:transparent url(img/menu_gri.png) top left repeat-x;
font-family:Verdana,Arial,sans-serif;
font-weight:bold;
font-size: 12px;
border: 1px solid gray;
height:30px!important;
height:32px; /*İE6 için*/
overflow:hidden;
}
UL elementimizden başladık boşlukları sıfırladık listemizinde simge göstermedik 100% genişlik verdik bir arka palan resmi verdik font özellikleri verdik 1 piksellik border uyguladık yükseklik verdik İE6 için ayrı bir yükseklik verdik ve taşmaları gizledik devam edelim
#gri ul li{
display:block;
float:left;
border-right: 1px solid gray;
}
display:block;
float:left;
border-right: 1px solid gray;
}
LI elementimize blok görünümü verdik sola yasladık ve sadece sağ kısıma 1 piksellik border uyguladık devam edelim
#gri ul li a{
color:#333;
display:block;
float:left;
text-decoration:none;
padding:8px 20px 0 20px;
height:30px;
}
color:#333;
display:block;
float:left;
text-decoration:none;
padding:8px 20px 0 20px;
height:30px;
}
A elementine renk verip blok görünümü verdik sola yasladık linklerimiz deki yazılara çizgi koymasını istemedik ve üstten 8, sağdan ve soldan 20 piksel yazılarımzı ittik son olarak yükseklik verdik devam edelim
#gri ul li a:hover {
color:#000;
background: url(img/menu_gri.png) center -60px no-repeat;
}
color:#000;
background: url(img/menu_gri.png) center -60px no-repeat;
}
Yukarıda A elementimizin üstüne gelince alıcağı rengi ve arka plan resmini verdik resime göre pozisyon uyguladık devam edelim
#gri ul li a:active, .menu #gri ul li a.aktif {
color:#fff;
background: url(img/menu_gri.png) center -30px no-repeat;
}
color:#fff;
background: url(img/menu_gri.png) center -30px no-repeat;
}
Yularıda linke tıklanınca ve en başta bizim atadığımız aktif etiketine renk verdik ve arka plan resmi verdik.
Bu son işlemimizdi. bu sefer... adım adım resim ekleyemedim kusura bakmayın onun yerine 5 renk ekledim bi şekilde telafisi olmuştur sanırım hoşcakalın...
Örnek - Ön İzleme
Menüleri alttaki bağlantıdan indirebilirsiniz
menuler.rar [13.33 Kb] (İndirme: 282)