Css yatay menü yapımı

Ufak bir aradan sonra merhaba, bu makalede sitelerimiz için güzel bir menü hazırlicaz… Bize gereken dosyalar, kodlar konun devamında verilmiiştir… Bu ders için azcık html ve css bilginiz olması konuyu kavramanız için iyi olacaktır… Kodları olduğunca açıklamaya çalştim yararlı olması dileğiyle…



Bİze gerekli klasör ve dosyalar: index.html stil.css ve images klasörmüz:


Öncelikle menü kodlarımızı ekleyelim… ul, li ve a basit html kodlarımız: bunu index.html dosyamızın içerisne ekleyebilirsiniz…

İndex.html görünümü şağıdaki gibi olacaktır…

Daha sonra stil.css dosyamızı açıp kodlamaya başlayalım: öncelikle bir #menu alanı oluşturalım…
Burada div#menu alanımızı oluşturduk arka plan resmimizi menubg.gif ekledik… repeat-x arkaplan resminin yatay oalrak tekrar etmesini sağlıyor…  repeat-y ise dikey olarak tekrarlar eğer no-repeat deseydik tekrarlama olmaycaktı… şimdilik bize gereken x olarak tekrar etmesi… daha sonra 32px lik bir yükseklik verdik bu değer arka plan resminin yüksekliğine eşit…

#menu {
background:url(images/menubg.gif) repeat-x;
height:32px;
}

yukarıdaki oluşturduğumuz alanı css mize ekliyelim… Aşağıdaki alanda gördüğünüz gibi div tagı içine css de oluşturduğumuz menuyu yazdık ve ul listesini kapsayacak şekilde / div> ile bitirdik…


css dosyamızda kodlamaya devam edelim:
ul elementi #menu içerisnde yer alndığı için bu şekilde kodluyoruz… list-style:none üstte önizlemsini gördüğünüz liste menünün yan tarafındaki noktaları kaldırmada yardımcı oluyor… ul li de ise menüyü sola yaslayarak yatay hale getirdik… Border-right(kolon-sağ) sağ tarafa 1px lik 75aad2 renginde bir çizgi çektik…

#menu ul{
list-style:none;
}
#menu ul li {
float:left;
border-right:1px solid #75AAD2;
}

menu son görünüm:

sıra geldi bağlantıları a elementini kodlamaya: font-family ile yazı fontunu seçiyoruz. color bildiğiniz gibi renktir…
border-right yukarda bahsettiğim gibi sağ tarafa 1pxlik bir çizgi çeker… font-size font boyutunu belirler… font-weight ise yazıların kalın olmasını sağlar. text-decoration ise a elementini kullandığımızda otomatik oalrak gelen alt çizgiyi kaldırmaya yarar. line-height ise satırlar arası yüksekliktir… menüyü ortalamak için kullandık.  padding ise a elemntinin kendi içine doğru verdiği girintidir… Aşağıda padding i daha iyi anlamanız için bir resim var… o ik değer ise aşağı ve yukarı – sağ ve soldur… ilk değer aşağıdan ve üstten değer sonraki ise sağdan ve soldan alacağı girinti değeridir… Bu menüler arası boşluk içindir…

#menu ul li a {
font-family:Arial;
color:#C3DBED;
border-right:1px solid #2B6484;
font-size:13px;
font-weight:bold;
text-decoration:none;
line-height:32px;
padding:8px 20px;
}

padding uygulanmış alan aşağıda mor ile renklendirilmiştir…  bkz.(Kutu Modeli – Padding Özellikleri)

sonraki adım ise fare üzerine menü üzerine geldiğimizde gerçekleşecek olaydır. hover aşağıda gördüğünüz gibi a:hover kodumuzda arkaplan resmimiz değişecek ve yazı rengi beyaz olacaktır…

#menu ul li a:hover{
background:url("images/menuhov.jpg") repeat-x;
color:#FFFFFF;
}

Sonraki olay ise aktif sayfa olayıdır… Örneğin anasayfadaysak bunu belirtmeek adına anasayfaya farklı bir görüntü koyabilriz.. bunun için bir sınıf oluşturabiliriz… aktif adında bir sınıf oluşturduk ve arkaplan rengini yeşil yapacak bir resim ekledik yazı rengi yine beyaz yaptık…

#menu ul li a.aktif{
background:url("images/aktif.jpg") repeat-x;
color:#FFFFFF;
}

Bu sınıfı ise html dosyamıza aşağıdaki gibi ekliyoruz…
<pre><code><li><a class="aktif" href="#">Anasayfa</a></li>

Kodlamanın Son Hali index.html

<div id="menu"><!-- Menü başlangıç-->
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Tasarımlar</a></li>
<li><a href="#">Referanslar</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div> <!-- Menü bitiş div-->

stil.css kodları

#menu {
background:url(images/menubg.jpg) repeat-x;
height:32px;
}
#menu ul{
list-style:none;
}
#menu ul li {
float:left;
border-right:1px solid #75AAD2;
}
#menu ul li a {
font-family:Arial;
color:#C3DBED;
border-right:1px solid #2B6484;
font-size:13px;
font-weight:bold;
text-decoration:none;
line-height:32px;
padding:8px 20px;
}
#menu ul li a:hover{
background:url("images/menuhov.jpg") repeat-x;
color:#FFFFFF;
}
#menu ul li a.aktif{
background:url("images/aktif.jpg") repeat-x;
color:#FFFFFF;
}

Demo Kaynak Dosyayı İndirin
kirliadam.com makalesidir…