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