Başlangıç

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

Yorum bırakın


En basit haliyle css ve html ile Yatay 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.

  • yatayacilirmenuolustur.html dosyasının içeriği;

<html>
<head>
<title>Yatay Açılır Menü Oluşturma</title>
<link rel=”stylesheet” type=”text/css” href=”yatayacilirmenustilleri.css”/>
<!–css dosyasının eklenmesi–>
</head>
<body>

<div id=”yacilirmenu”> <!–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>

  • yatayacilirmenustilleri.css dosyasının içeriği;

#yacilirmenu ul{/*tüm listelerin genel css ayarları*/
padding:0;
margin:0;
list-style:none;
}
#yacilirmenu li{
float:left;/*ana listenin yanyana gözükmesi için*/
position:relative;/*liste konumlandırma göreceli*/
width:150px;
border:1px solid #000;}
#yacilirmenu li ul{/*alt listelerin css durumu*/
display:none;/*alt liste gözükmesin*/
left:0;
position:absolute;
top:16px; }
#yacilirmenu li a{
display:block;
text-decoration:none;
background-color:#06C;
color:#FFF;
font:bold 13px Verdana, Geneva, sans-serif;
padding:0;
}
#yacilirmenu li a:hover{
background-color:#0fC;
color:#FF0;
}
#yacilirmenu li:hover ul {display:block;}/*liste elemanı üzerine gelindiğinde alt listeleri göster*/

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

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

Yorum bırakın


En basit haliyle css ve html ile Yatay 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.

  • yataymenuolustur.html dosyasının içeriği;

<html>
<head>
<title>Yatay Menü Oluşturma</title>
<link rel=”stylesheet” type=”text/css” href=”yataymenustilleri.css”/>
<!–css dosyasının eklenmesi–>
</head>
<body>
<ul class=”yataymenu”> <!–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>

  • yataymenustilleri.css dosyasının içeriği;

.yataymenu{ /*yataymenu sınıfı css ayarları*/
list-style-type:none; /*listedeki madde işaretlerini kaldır */
margin:0;
padding:0;
}
.yataymenu a{ /*yataymenu 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;
}
.yataymenu a:hover{/*yataymenu sınıfına link üzerine gelindiğinde css ayarları*/
background-color:#C30;
color:#00F;
}
.yataymenu li{
display:inline;/*liste elemanlarını yanyana yerleştirir.*/
}

Bana Silverlight Anlat

meslek lisesi ders notları

Eren ÇOLAK

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