Başlığı Yazdır
Yatay açılıs css menü resimli anlatım
serhat5858
örn: Html kodumuz
Kaynağı İndir  Kod
01.<ul id="menu" >
02.   
<li><a href="#">Anasayfa</a></li>
03.   
<li><a href="#">Haberler</a>
04.   
<ul>
05.       
<li><a href="#">şirket Haberleri </a></li>
06.       
<li><a href="#">Yurt içi Haberleri </a></li>
07.       
<li><a href="#">Yurt dışı Haberleri</a></li>
08.   
</ul>
09.   
</li>
10.   
<li><a href="#">Ürünler</a>
11.   
<ul>
12.       
<li><a href="#">Tencere</a></li>
13.       
<li><a href="#">Tava</a></li>
14.       
<li><a href="#">Ütü</a></li>
15.       
<li><a href="#">Tost Makinesi </a></li>
16.       
<li><a href="#">El Süpürgesi </a></li>
17.   
</ul>
18.   
</li>
19.</ul>



kizilova.bplaced.net/sil/menuyatay1.gif
İlk olarak satır başı boşluklarını ve imgeleri kaldıralım
Kaynağı İndir  Kod
1.ul#menu, ul#menu ul {
2.   
list-style: none;
3.   
margin: 0;
4.   
padding: 0;
5.}



Daha sonra menümüzü yatay hale getirmek için float özelliğini kullanalım. Normalda bunun için display:inline kodunu da kullanabiliriz Sonra ilk linkleri göreceli olarak konumlandırmalıyız. Bu konumlandırma aslında ikinci kademe açılacak menüye mutlak konumlandırma yapılması için kullanılır.
Göreceli olarak konumlandırılmış(postion:relative) bir elementin içindeki Mutlak Konumlandırılmış(position:absolute) bir element içerik blokunun(burada menünün ilk linkleri) üst,sağ,sol ve alttından hizalandıralabilir. Bu kullanım bize bir çok uygulmada yardımcı olacaktır ve bu kullanım ile çok güzel sonuçlar elde edeceğiz.

CSS ile konumlandırma(positioning)
Kaynağı İndir  Kod
1.ul#menu li {
2.   
float: left;
3.   
position: relative;
4.   
width: 150px;
5.}



Sonra ikincil linkleri sayfaya ilk açıldığında görünmez(display:none) yapalım. Birincil linklere göre konumlandırmak için postion:absolute özelliği ve top:19px (satır yüksekliği 15px + 2px alttan(sonra ekleyeceğiz) + 2px üstten(sonra ekleyeceğiz)) özelliğini kullanalım
Kaynağı İndir  Kod
1.ul#menu li ul {
2.   
display: none;
3.   
position: absolute;
4.   
top: 19px; /* yukseklik 15px + sonradan eklenecek paddingler 4px toplam 19px */
5.   
left: 0;
6.}




Yalnız burada IE sorun çıkaracaktır. IE ve Opera ikincil menüleri konumlandırmasında sorun çıkarır, bunu engellemek için
Kaynağı İndir  Kod
1.ul#menu li > ul {
2.   
top: auto;
3.   
left: auto;
4.}



kizilova.bplaced.net/sil/yataymenu2.gif
Görünümü biraz güzelleştirelim
Kaynağı İndir  Kod
01.ul#menu li a {
02.   
font: bold 11px arial, helvetica, sans-serif;
03.   
display: block;
04.   
border-width: 1px;
05.   
border-style: solid;
06.   
border-color: #ccc #888 #555 #bbb;
07.   
margin: 0;
08.   
padding: 2px 3px;
09.   
color: #000;
10.   
background: #efefef;
11.   
text-decoration: none;
12.}



ve rollover hali için:
Kaynağı İndir  Kod
1.ul#menu li a:hover {
2.   
color: #a00;
3.   
background: #fff;
4.}



Sonra birincil linklerin üzerine gelince ikincil linklerin görünmesi için
Kaynağı İndir  Kod
1.ul#menu li:hover ul {
2. 
display: block;
3.}



IE;de çalışmayacaktır. IE;de çalışması için aşağıdaki kodları yazmalıyız.
Kaynağı İndir  Kod
01.startList = function() {
02.   
if (document.all&&document.getElementById) {
03.       
navRoot = document.getElementById("menu");
04.       
for (i=0; i<navRoot.childNodes.length; i++) {
05.           
node = navRoot.childNodes[i];
06.           
if (node.nodeName=="LI") {
07.               
node.onmouseover=function() {
08.               
this.className+=" over";
09.               
}
10.               
node.onmouseout=function() {
11.               
this.className=this.className.replace(" over", "");
12.               
}
13.           
}
14.       
}
15.   
}
16.}
17.window.onload=startList;



Ayrıca aşağıdaki kodu da eklemeliyiz
Kaynağı İndir  Kod
1.ul#menu li:hover ul, ul#menu li.over ul{
2. 
display: block;
3.}



Önemli bir not olarak koddaki <ul id="menu" > ve javascriptteki navRoot = document.getElementById("menu"); aynı olmasına dikkat edelim.

işte sonuç
LİNKI TIKLAYINIZ
http://kizilova.b.../menu4.htm

kizilova.bplaced.net/sil/ymenu.GIF
serhat5858 tarafından eklenilenresim:
ymenu.gif
 
Google Adsence
23/10/2017 07:29


Reklam Botu

Mesaj: n^x
Katılım: Asla

IP: Yok  
daimi
Teşekkür ederim Serhat. Elinde olan ve bildiğin herşeyi paylaştığın için.
 
Akdenizli
iyi güzel anlatmışsın ama sonunda tamamlanmış kodlarıda versydin keşke. yeterli bilgisi olmayan benim gibiler birşey anlamadı çünkü yukardan.
 
Atlanılacak Forum: