izmir escort
Hakkı Duman – Wordpress, Seo ve Opencart Uzmanı

Css ve Xhtml İle Yatay Menü Oluşturma

Css ve Xhtml İle Yatay Menü Oluşturma 1Bu 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..

Css ve Xhtml İle Yatay Menü Oluşturma 2Css ve Xhtml İle Yatay Menü Oluşturma 3

BİR YORUM YAZIN

Yorumu Cevapla [ Yoruma cevap yazmaktan vazgeç ]

ZİYARETÇİ YORUMLARI - 3 YORUM
  1. erdogan dedi ki:

    emegine saglik

  2. erdogan dedi ki:

    erdogan:

    emegine saglik

    Bu yoruma oy ver : 0  0

  3. Abdurrahman dedi ki:

    Güzel çalışma olmuş, yalnız okuyucuları copy/paste e yönlendirmesek daha iyi olur görüşündeyim.

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

    Yerine "menümüzün css kodları aşağıdaki gibidir." daha makbule geçerdi. İyi çalışmalar !

Copyright 2010 Hakkı DUMAN Kişisel Blog. Tüm hakları saklıdır.