Görsel Tasarım

Css ve Xhtml İle Yatay Menü Oluşturma

Bu yazımda sizlere basitce bir yatay menü yapmayı anlatıcam menümüzü yaparken xhtml ve css kodlamalarından faydalanıcaz.Günümüzde bir çok sitede kullanılan css menüler sabit düz menülerin tahtına çokdan oturmuş durumda artık sabit menüler yerine hareketli css menüler kullanılmakta bu menülerin yapımına basitce örnek vererek şık bir css yatay menü hazırlayalım hazırlarken kullanacağımız tek şey boş bir not defteri hiç bir tasarım programına ihtiyaç duymuyoruz..

Aşağıda vermiş olduğum kodları boş bir not defterine yapıştırıp style.css adıyla kaydedin.

#menu {
width:600px;
height:40px;
background-image:url(menubg.gif);
color:#fff;
font:bold 14px arial, verdana, helvetica, sans-serif;
border:1px solid #999;
}
 
#menu ul {
list-style-type:none;
padding:0;
margin:0;
}
 
#menu li {
display:inline;
margin:0;
padding:0;
}
 
#menu li a {
text-decoration:none;
color:#fff;
background:#333 url(menubg.gif);
padding:12px;
float:left;
}
 
#menu li a:hover {
color:#333;
background:#fff url(menuhover.gif);
text-decoration:none;
padding:12px;
float:left;
} 
 

style dosyamızı oluşturmuş olduk sıra geldi menümüzün görünür kısmını oluşturmaya.Aşağıda verdiğim kodları menu.html veya linkler.html adıyla kaydedebilirsiniz isteğinize kalmış kaydedip style dosyamızı kaydettiğimiz dizine kaydediyoruz.


 

Css ve Xhtml kullanarak yatay menümüzü oluşturmuş olduk son olarak aşağıda verdiğim iki adet resmi style.css ve menu.html dosyalarımızla aynı dizine atarsak menümüz sorunsuz çalışıcaktır kolay gelsin..

Yorum

Düşüncelerinizi Paylaşın