Html Css Dikey Menü Örneği

Bu örneğimizde Css kullanarak bir hareketli dikey menü yapacağız. Öncelikle body bölümünde gerekli ayarları yapan css kodlarını yazacağız. Daha sonra menum isimli bir class oluşturup dikey menümüzü yapacağız. Daha sonra menü için gerekli ayarlamaları yapacağız. Ondan sonra fare ile menünün üzerine geldiğimizde oluşacak şeklini belirlemek için gerekli css kodlarını yazacağız. Son olarak ta sayfanın body bölümüne menüde olmasını istediğimiz menü elemanlarını liste şeklinde yazarak menümüzü tamamlayacağız.

Menünün Css ve Html kodları:

<!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>Başlıksız Belge</title>
<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: 2px;  font-family: Tahoma;
  font-size: 14px; }
body ul li a:hover {  background-color:#FC3; text-decoration: none; font-size: 18px; color:#F00;
 font-family:"Times New Roman";}
</style>
</head>

<body>
 <div class="menu">
 <ul>
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Hakkımızda</a></li>
    <li><a href="#">Resimler</a></li>
    <li><a href="#">Özgeçmiş</a></li>
    <li><a href="#">İletişim</a></li>
 </ul>   
</div>
</body>
</html>

Menünün ekran görüntüleri: