Html/Css İle Dikey Menü Yapma
Daha önce kod kullanmadan bir grafik programı yardımı ile Dreamweaver'de Css'le Yatay Menü Yapma ' yı bir önceki yazımızda da,  bir editör kullanarak Html/Css İle Yatay Menü Yapma'yı öğrenmiştik.

Bu yazımızda ise, yine bir editör (Notepad++) veya txt metin belgesi yardımı ile Html/Css ile Dikey Menü Yapma'yı öğreneceğiz. 

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


dikeymenu.jpg

Önce menü elemanlarımızı listeleyerek Html kodlarımızı yazalım. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dikey Menu Yapma</title>
<body>
<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="#">İletişim</a></li>
</ul>
</body>

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

<body>
<ul>
  <li><a href="index.html">Anasayfa</a></li>
  <li><a href="hakkımızda.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="iletisim.html">İletişim</a></li>
</ul>
</body>

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

<style type="text/css">
body ul {
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}
body ul li a {
 display: block;
 height: 40px;
 width: 150px;
 padding-left: 5px;
 line-height: 40px;
 background-color: #00F;
 color: #FFF;
 text-decoration: none;
 margin-bottom: 5px;
        font-family: Tahoma;
        font-size: 14px; 
}

Yukarıdaki Css kodları ile her bir menü elemanımızın yükseklik ve genişliklerini, zemin rengini, yazıların rengi, tipi, boyu v.s. özelliklerini belirtiyoruz. 

Aşağıdaki Css kodlarında da mausla her bir menü elemanının üzerine gelince (hover) zemin rengi ve yazı büyüklüğünün değişmesini istedik.

body ul li a:hover {
 background-color: #F60;
 text-decoration: none;
 font-size: 18px;
}
</style>
</head>

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ü blogunuzun sağ ve sol sidebar veya footer kısmına ekleyebilirsiniz.