html-css.jpg
Daha önce kod kullanmadan bir grafik programı yardımı ile Dreamweaver'de Css'le Yatay Menü Yapma ' yı öğrenmiştik. Bu yazımızda ise,  bir editör kullanarak Html/Css ile basit bir yatay menü yapmayı öğreneceğiz.

 Yapacağımız menünün görüntüsü aşağıdaki gibi olacaktır.

Css'le Yatay Menü Yapma
Notepad++ veya bir txt metin belgesi açarak Html kodlarımızı yazıyoruz.




<div id="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Ürünlerimiz</a></li>
<li><a href="#">Projelerimiz</a></li>
<li><a href="#">Makaleler </a></li>
<li><a href="#">Yazarlar</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>


Menülerimizi listeledikten sonra her bir menü elemanımıza link verelim. Yanlız link verirken türkçe karekter kullanmamaya dikkat edeceğiz. Html kodumuz aşağıdaki gibi olacaktır.

<div id="menu">
<ul>
<li><a href="anasayfa.html">Anasayfa</a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="urunlerimiz.html">Ürünlerimiz</a></li>
<li><a href="projelerimiz.html">Projelerimiz</a></li>
<li><a href="makaleler.html">Makaleler </a></li>
<li><a href="yazarlar.html">Yazarlar</a></li>
<li><a href="iletisim.html">İletişim</a></li>
</ul>
</div>

Şimdi Css' le menümüze şekil vermeye başlayalım.


<style type="text/css">

    /*menümüzün genişlik ve yüksekliğini belirliyoruz.*/
#menu {           
 background-color: #ef9c00;
 height: 40px;
 width: 840px;
}
#menu ul {
 margin: 0px;
 padding: 0px;
}

Her bir menü elemanımız için genişlik belirliyoruz. Soldan Sağa doğru sıralanması için float: left diyoruz.

#menu ul li {
 float: left;
 width: 120px;
 list-style-type: none;
}

Menü elemanlarımızla ilgili font, renk. en. boy v.s seçiyoruz.

#menu ul li a {
 line-height: 40px;
 font-family: Tahoma;
 color: #FFF;
 text-decoration: none;
 text-align: center;
 display: block;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #fff;
 font-size: 14px;
}

Mausla menü elemanı üzerine gelince (hover) renginin değişmesi için;

#menu ul li a:hover {
    background-color: #4183f0;
}</style>


Dosyamızı menu.html adı ile kaydettikten sonra tarayıcımızla görüntülüyoruz. 

 İsterseniz kodları kopyalayıp Kontrol Paneli> Yerleşim> Gadget Ekle> Html/JavaScript  yolunu takip ederek açılan pencereye yapıştırarak menüyü blogunuzdaki üstbilgi altına ekleyebilirsiniz.