Başlangıç

CSS ve Liste etiketleri ile En Basit Dikey Açılır Menü Yapımı

Yorum bırakın


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>

<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”>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*/

/* IE. gizle \*/
* 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.

Reklamlar

CSS ve Liste etiketleri ile En Basit Dikey Menü Yapımı

Yorum bırakın


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>

  • 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;
}

Bana Silverlight Anlat

meslek lisesi ders notları

Eren ÇOLAK

Yazılım Mühendisi Olmak Yolunda İlerliyor...