Basit Dikey Menü Örneği - CSS
CSS ile bir dikey menü oluşturma örneğine göz atalım.
Ekran Görüntüsü
Dosyalar
index.html
<!DOCTYPE HTML>
<html lang="tr-TR">
<head>
<meta charset="utf-8">
<title>Basit Dikey Menü Örneği</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul class="dikey_menu">
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Referans</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</body>
</html>
style.css
.dikey_menu {
list-style-type:none;
margin:0px auto;
padding:2px;
}
.dikey_menu a {
display:block;
color:#595959;
background-color:#e2e2e2;
border-radius:3px;
border:1px solid #454545;
width:120px;
padding:5px 10px;
text-decoration:none;
font-weight:bold;
}
.dikey_menu a:hover {
font-weight:bold;
color:#FFFFFF;
background-color:#81807e;
}
.dikey_menu li {
margin:0px 0px 2px 0px;
}
style.css (Açıklamalı)
/* --------------------------------------------------
index.html dosyasında <ul> etiketi içine
yazdığımız "dikey_menu" adlı class için
css ayarlarını yapıyoruz.
-------------------------------------------------- */
.dikey_menu {
/* --------------------------------------------------
<ul> ve <li> etiketlerini kullanarak
maddelerden oluşan bir liste yapmış oluyoruz.
Başındaki madde işaretlerini
kaldırmak için bunu kullandık.
-------------------------------------------------- */
list-style-type:none;
margin:0px auto;
padding:2px;
}
/* --------------------------------------------------
dikey_menu sınıfındaki bağlantılar
için css ayarlarını yapıyoruz.
-------------------------------------------------- */
.dikey_menu a {
/* --------------------------------------------------
Menülerin alt alta görünmesini sağlıyoruz.
-------------------------------------------------- */
display:block;
/* --------------------------------------------------
Bağlantının yazı rengini belirledik.
-------------------------------------------------- */
color:#595959;
/* --------------------------------------------------
dikey_menu sınıfındaki bağlantıların
arka plan rengini belirledik.
-------------------------------------------------- */
background-color:#e2e2e2;
/* --------------------------------------------------
Kenarlık yaptık.
-------------------------------------------------- */
border:1px solid #454545;
/* --------------------------------------------------
Kenarları yuvarlatılmış dikdörtgen
yapmak için bu kodu kullandık.
-------------------------------------------------- */
border-radius:3px;
/* --------------------------------------------------
Menünün genişliğini ayarladık.
-------------------------------------------------- */
width:120px;
padding:5px 10px;
/* --------------------------------------------------
Bağlantıların yazı tipi varsayılan
olarak altı çizili olur.
Bunu kaldırmak için bu kodu kullandık.
-------------------------------------------------- */
text-decoration:none;
/* --------------------------------------------------
Yazıyı kalın yapıyor.
-------------------------------------------------- */
font-weight:bold;
}
/* --------------------------------------------------
dikey_menu sınıfı içinde işaretçiyi bağlantı
üzerine getirdiğimizde olacakları belirliyoruz.
-------------------------------------------------- */
.dikey_menu a:hover {
/* --------------------------------------------------
Yazı yine kalın kalsın.
-------------------------------------------------- */
font-weight:bold;
/* --------------------------------------------------
İşaretçi bağlantı üstüne geldiği
zaman yazı rengi beyaza dönüşsün.
-------------------------------------------------- */
color:#FFFFFF;
/* --------------------------------------------------
İşaretçi bağlantı üstüne geldiği
zaman arka plan rengi koyu gri olsun.
-------------------------------------------------- */
background-color:#81807e;
}
/* --------------------------------------------------
dikey_menu sınıfı içinde
<li> etiketi ile ilgili
özellikleri belirliyoruz.
-------------------------------------------------- */
.dikey_menu li {
/* --------------------------------------------------
Bağlantılar arasındaki boşluğu belirledik.
-------------------------------------------------- */
margin:0px 0px 2px 0px;
}
İndirme Bağlantısı
Konu ile ilgili örnek dosyayı bu bağlantıdan indirebilirsiniz: İndir
Etiketler
css açıklamalı içerik