En basit haliyle css ve html ile Dikey Açılır 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.
- dikeyacilirmenuolustur.html dosyasının içeriği;
<html>
<head>
<title>Dikey Açılır Menü Oluşturma</title>
<link rel="stylesheet" type="text/css" href="dikeyacilirmenustilleri.css"/>
<!--css dosyasının eklenmesi-->
</head>
<body>
<head>
<title>Dikey Açılır Menü Oluşturma</title>
<link rel="stylesheet" type="text/css" href="dikeyacilirmenustilleri.css"/>
<!--css dosyasının eklenmesi-->
</head>
<body>
<div id="dacilirmenu"> <!--dosyadaki sınıfın etikete uygulanması-->
<ul>
<li><a href="#" target="_self">ANASAYFA</a></li>
<li><a href="#" target="_self">RESİMLER</a>
<ul>
<li><a href="#" target="_self">ANASAYFA</a></li>
<li><a href="#" target="_self">RESİMLER</a>
<ul>
<li><a href="#" target="_self">Tatil Resimleri</a></li>
<li><a href="#" target="_self">Kişisel Resimler</a></li>
<li><a href="#" target="_self">Okul Resimleri</a></li>
</ul>
<li><a href="#" target="_self">Tatil Resimleri</a></li>
<li><a href="#" target="_self">Kişisel Resimler</a></li>
<li><a href="#" target="_self">Okul Resimleri</a></li>
</ul>
<li><a href="#" target="_self">İLETİŞİM</a></li>
</ul></div></body></html>
- dikeyacilirmenustilleri.css dosyasının içeriği;
#dacilirmenu ul{
margin:0;
padding:0;
list-style:none;/*liste etikeltlerini kaldır*/
width:150px;
border:1px solid #000;/*en alttaki kenarlık için*/
}
#dacilirmenu li{
position:relative;/*bir önceki konuma göre diğer listeyi yerleştirme*/
}
#dacilirmenu li ul{
position:absolute;/*alt liste bağlı olduğu listenye göre konumlansın*/
left:149px;/*sol tarafa alt listeyi kaydır*/
width:150px;
display:none; /*normalde alt liste gözükmesin*/
top:0;/*bağlı olduğu listeye göre üstte sıfır konumu*/
}
#dacilirmenu li a{
display:block;/*liste elemanları eşit boylarda olsun*/
text-decoration:none;
background-color:#06C;
color:#FFF;
font:bold 13px Verdana, Geneva, sans-serif;
padding:5;
border:1px solid #000;
border-bottom:0;
}
#dacilirmenu li a:hover{
background-color:#0fC;
color:#FF0;
}
#dacilirmenu li:hover ul {display:block;}/*gizlenmiş alt liste gözüksün*/
margin:0;
padding:0;
list-style:none;/*liste etikeltlerini kaldır*/
width:150px;
border:1px solid #000;/*en alttaki kenarlık için*/
}
#dacilirmenu li{
position:relative;/*bir önceki konuma göre diğer listeyi yerleştirme*/
}
#dacilirmenu li ul{
position:absolute;/*alt liste bağlı olduğu listenye göre konumlansın*/
left:149px;/*sol tarafa alt listeyi kaydır*/
width:150px;
display:none; /*normalde alt liste gözükmesin*/
top:0;/*bağlı olduğu listeye göre üstte sıfır konumu*/
}
#dacilirmenu li a{
display:block;/*liste elemanları eşit boylarda olsun*/
text-decoration:none;
background-color:#06C;
color:#FFF;
font:bold 13px Verdana, Geneva, sans-serif;
padding:5;
border:1px solid #000;
border-bottom:0;
}
#dacilirmenu li a:hover{
background-color:#0fC;
color:#FF0;
}
#dacilirmenu li:hover ul {display:block;}/*gizlenmiş alt liste gözüksün*/
/* IE. gizle \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* IE den gizleme sonu */
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* IE den gizleme sonu */
not:Tüm css dosyaları en az sayıda parametre kullanılarak hazırlanmış menü örnekleridir. Tasarımlara göre değişik eklentilerle çok daha görsel menüler oluşturulabilir.
Hiç yorum yok :
Yorum Gönder