En basit haliyle css ve html ile Dikey menü yapmak için bir adet html dosyası ve bir adette css dosyası oluşturalım. Bu dosyaları herhangi bir metin editörü (notepad.exe) veya Dreamweaver Programı ile oluşturabilirsiniz.
- dikeymenuolustur.html dosyasının içeriği;
<html>
<head>
<title>Dikey Menü Oluşturma</title>
<link rel=”stylesheet” type=”text/css” href=”dikeymenustilleri.css”/>
<!–css dosyasının eklenmesi–>
</head>
<body>
<ul class=”dikeymenu”> <!–dosyadaki sınıfın etikete uygulanması–>
<li><a href=”#” target=”_self”>ANASAYFA</a></li>
<li><a href=”#” target=”_self”>RESİMLER</a></li>
<li><a href=”#” target=”_self”>İLETİŞİM</a></li>
</ul></body></html>
<head>
<title>Dikey Menü Oluşturma</title>
<link rel=”stylesheet” type=”text/css” href=”dikeymenustilleri.css”/>
<!–css dosyasının eklenmesi–>
</head>
<body>
<ul class=”dikeymenu”> <!–dosyadaki sınıfın etikete uygulanması–>
<li><a href=”#” target=”_self”>ANASAYFA</a></li>
<li><a href=”#” target=”_self”>RESİMLER</a></li>
<li><a href=”#” target=”_self”>İLETİŞİM</a></li>
</ul></body></html>
- dikeymenustilleri.css dosyasının içeriği;
@charset “iso-8859-9″;
/* CSS Document */
body{ /*body etiketi css ayarları*/
margin:0;
padding:0;
background-color:#9C9;
}
.dikeymenu{ /*dikeymenu sınıfı css ayarları*/
list-style-type:none; /*listedeki madde işaretlerini kaldır */
margin:0;
padding:0;
}
.dikeymenu a{ /*dikeymenu sınıfına link verildiğinde css ayarları*/
text-decoration:none;/*altı çizili özelliğini kaldır*/
background-color:#336;
color:#CF0;
width:100px;
display:block; /* listedeki tüm liste elemanlarının genişliği*/
}
.dikeymenu a:hover{/*dikeymenu sınıfına link üzerine gelindiğinde css ayarları*/
background-color:#C30;
color:#00F;
}
/* CSS Document */
body{ /*body etiketi css ayarları*/
margin:0;
padding:0;
background-color:#9C9;
}
.dikeymenu{ /*dikeymenu sınıfı css ayarları*/
list-style-type:none; /*listedeki madde işaretlerini kaldır */
margin:0;
padding:0;
}
.dikeymenu a{ /*dikeymenu sınıfına link verildiğinde css ayarları*/
text-decoration:none;/*altı çizili özelliğini kaldır*/
background-color:#336;
color:#CF0;
width:100px;
display:block; /* listedeki tüm liste elemanlarının genişliği*/
}
.dikeymenu a:hover{/*dikeymenu sınıfına link üzerine gelindiğinde css ayarları*/
background-color:#C30;
color:#00F;
}
Hiç yorum yok :
Yorum Gönder