Menü ve Reklam Alanı
Sayfayı Paylaş

THB - Ücretsiz Hizmetler

basityataymenuyapimi

Basit Yatay Menü Yapımı

 Daha önce dikey olarak nasıl menü yapacağımızı sizlere anlatmıştım, şimdi dikey menü yapalım.

Örnek:



Gerekli Görseller:

   

Şimdi CSS kodlarını yazalım.
Önceki menüde yaptığımız gibi öncelikle bunda da bir katman içerisinde ul ve li elemanlarımızı tanımlayacağız. (Siz bir katman içerisinde tanımlamak zorunda değilsiniz.)

ul elemanı için stil kodumuzu tanımlayalım, burada önemli olarak standart liste yönteminin başındaki madde işaretlerini kaldıracağız ve menümüzün ana arkaplan ve genişliği gibi tanımlamalarda bulunacağız.

#yataymenu ul { 
width: 620px; 
height: 40px; 
list-style:none; 
background: url(/yataymenubg1.png); 
font-family: Arial; 
font-size;15px; 
margin: 0; 
padding: 0; }

Şimdi li elemanı için gerekli tanımlamaları yapalım. Burada ise önemli olarak liste elemanlarının nasıl hizalanacağını belirlemek menümüz yatay olacağı için aynı çizgide display komutu ile yan yana hizalamalıyız. Ayrıca sola dayalı bir menü olacağından float komutuyla sola dayamamız gerekmektedir.

#yataymenu li a { 
width: 124px; 
height:30px; 
padding-top: 10px; 
padding-left: 10px; 
float:left; color:#fff; 
text-decoration:none; 
display:inline; }

Not: Normalde arkaplan 40px yüksekliğinde ancak padding-top değeri verdiğimiz için height değerinden 10px sildik.

Şimdi menü liste elemanlarının üzerine fare imleci getirildiğinde nasıl bir stil ile karşılacağını hove ile ayarlıyoruz.

#yataymenu li a:hover { 
background: url(/yataymenubg2.png); 
font:12px; 
color: #ffbd1e; }

HTML kodu:


<div id="yataymenu">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</div>





Bu sayfa hakkında yorum ekle:
İsmin:
E-mail adresin:
Mesajınız:

Bugün 4 ziyaretçi (91 klik) sitemizi ziyaret etti.

Copyright 2012. THB. Tüm hakları saklıdır. Tasarımlayan: Oğuzhan Acımaz.
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=