Derse geçmeden önce ne yapacağımızı kısaca anlatayım. En başta HTML liste kodlarımızı yazacağız. Daha sonra ise CSS ile yazdığımız HTML kodlarını şekillendireceğiz. Hepsi bu kadar :)
Ne yapacağız hemen bir önizlemesini göstereyim. Daha sonra da derse geçelim.
Şimdi en başta bir html dosyası oluşturuyoruz. Yazdığımız isim hiç önemli değil. uzantısı ".html ya da .htm" olsun yeterli. Unutmadan şunu da belirteyim, kod yazarken elimizden geldiği kadar Türkçe karakter kullanmamaya özen gösterin.
Html dosyamızın içerisine normal html taglarımızı yazıyoruz. Daha sonra menümüz için gerekli div'leri body tagları arasına yazıyoruz;
Kodlarımızı yazdıktan sonra ister ayrı bir css dosyası açıp html dosyanıza çağırın ister aynı dosya içinden devam edin. Ben aynı dosya üzerinden devam edeceğim. Bunun için de "head" tagı arasına,
taglarını ekliyoruz. Oraya CSS kodlarımızı yazacağız. Yazmaya başlayalım. En dıştaki div'imize biraz şekil verdik. Ben her CSS kodunun yanına açıklamasını yapmaya çalıştım;
#dikeymenu{
width: 250px; /* Genisligi Ayarladık */
border: 1px solid #DEDEDE; /* Tablo kalinligi, stili ve rengini belirttik */
background: #F7F7F7; /* Arkaplan rengini belirttik */
border-radius: 5px; /* Tabloyu ovallestirdik */
padding: 0 5px 5px 5px; /* Sagdan, soldan ve asagidan tablo ici bosluklar verdik */
margin-bottom: 10px; /* Tablo alti bosluk verdik */
}
Menü Başlığı için tanımladığımız div'imize biraz çeki düzen verelim :)
.menubaslik{
border: 1px solid #DEDEDE; /* Tablo kalinligi, stili ve rengini belirttik */
background: #F0F0F0; /* Arkaplan rengini belirttik */
border-radius: 5px; /* Tabloyu ovallestirdik */
padding: 5px; /* Tablo ici bosluk verdik */
margin-top: 5px; /* Tablo ustu bosluk verdik */
}
.menubaslik h2{
margin: 0; /* Tablo disi boslugu sifirladik */
padding: 0; /* Tablo ici boslugu sifirladik */
font-family: Verdana; /* Yazi tipini belirledik */
font-size: 18px; /* Yazi tipi boyutunu belirledik */
font-weight: bold; /* Yazi kalinligini belirledik */
color: #076C94; /* Yazi rengini belirledik */
text-shadow: -1px 1px #fff; /* Yazi golgesini belirledik */
}
Son olarak da menünün link özelliklerini ve liste özelliklerini belirten CSS kodlarımızı yazıyoruz;
#dikeymenu ul{
margin: 0; /* Tablo disi boslugu sifirladik */
border: 1px solid #DEDEDE; /* Tablo kalinligi, stili ve rengini belirttik */
background: #F0F0F0; /* Arkaplan rengini belirttik */
border-radius: 5px; /* Tabloyu ovallestirdik */
padding: 0 5px 0 5px; /* Tablo ici sag ve sol boslugu belirledik */
margin-top: 5px; /* Tablo disi ust boslugu belirledik */
}
#dikeymenu ul li{
list-style-type: none; /* Listenin solundaki sekilleri kaldirdik */
border-bottom: 1px dashed #DEDEDE; /* Linklerin altindaki kesik cizgileri belirledik */
}
#dikeymenu ul li a{
font-size: 12px; /* Yazi tipi butunu belirledik */
font-family: Verdana; /* Yazi tipini belirledik */
color: #076C94; /* Yazi rengini belirledik */
text-decoration: none; /* Yazinin altindaki cizgiyi kaldirdik */
margin: 5px 0 5px 0; /* Yazinin asagi ve yukari bosluklarını belirledik */
padding: 2px 0 2px 0; /* Yazi ici yukari ve asagi bosluklari belirledik */
}
#dikeymenu ul li a:hover{
font-weight: bold; /* Yazi kalinligini belirledik */
}
Her şeyi doğru yaptıysak görüntü şuna benzer birşey olacak;
Anlatımını yaptığımız menünün tüm kodları için;
HTML Kodları;
CSS Kodları;
#dikeymenu{
width: 250px;
border: 1px solid #DEDEDE;
background: #F7F7F7;
border-radius: 5px;
padding: 0 5px 5px 5px;
margin-bottom: 10px;
}
.menubaslik{
border: 1px solid #DEDEDE;
background: #F0F0F0;
border-radius: 5px;
padding: 5px;
margin-top: 5px;
}
.menubaslik h2{
margin: 0;
padding: 0;
font-family: Verdana;
font-size: 18px;
font-weight: bold;
color: #076C94;
text-shadow: -1px 1px #fff;
}
#dikeymenu ul{
margin: 0;
border: 1px solid #DEDEDE;
background: #F0F0F0;
border-radius: 5px;
padding: 0 5px 0 5px;
margin-top: 5px;
}
#dikeymenu ul li{
list-style-type: none;
border-bottom: 1px dashed #DEDEDE;
}
#dikeymenu ul li a{
font-size: 12px;
font-family: Verdana;
color: #076C94;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 2px 0 2px 0;
}
#dikeymenu ul li a:hover{
font-weight: bold;
}
Kaynak: Css basit dikey menü yapımı
