Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj13.07.2011, 16:38 (UTC)    
Mesaj konusu: Açılır Kapanır Yatay Menü Yapımı

ya bunu gerçekten çok araştırdım ama anlatımını bulamadım yazılı resimli videolu herhangi bir anlatımı varmı? üstüne gelince açılan üstünden çıkınca kapanan yatay bir menü yapımı

varsa linkini atarmısınız burdan veya anlatımı eklermisiniz
Mesaj13.07.2011, 16:51 (UTC)    
Mesaj konusu:

Orjinal anlatım : http://www.fatihhayrioglu.com/css-ile-menu-yapmak-iv-yatay-acilir-menuler/

<ul id="menu" >
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Haberler</a>
<ul>
<li><a href="#">şžirket Haberleri </a></li>
<li><a href="#">Yurt içi Haberleri </a></li>
<li><a href="#">Yurt dışı Haberleri</a></li>
</ul>
</li>
<li><a href="#">Ürünler</a>
<ul>
<li><a href="#">Tencere</a></li>
<li><a href="#">Tava</a></li>
<li><a href="#">Ütü</a></li>
<li><a href="#">Tost Makinesi </a></li>
<li><a href="#">El Süpürgesi </a></li>
</ul>
</li>
</ul>


İlk olarak satır başı boşluklarını ve imgeleri kaldıralım. Dikey menüde olduğu gibi.
?


ul#menu, ul#menu ul {
list-style: none;
margin: 0;
padding: 0;
}


Daha sonra menümüzü yatay hale getirmek için float özelliğini kullanalım. Normalde bunun için display:inline kodunu da kullanabiliriz.(Bkz. CSS ile Menü Yapmak II – Yatay Menüler) 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)
?
1
2
3
4
5

ul#menu li {
float: left;
position: relative;
width: 150px;
}


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.
?
1
2
3
4
5
6

ul#menu li ul {
display: none;
position: absolute;
top: 19px; /* yukseklik 15px + sonradan eklenecek paddingler 4px toplam 19px */
left: 0;
}


Yalnız burada IE sorun çıkaracaktır. IE ve Opera ikincil menüleri konumlandırmasında sorun çıkarır, bunu engellemek için:
?
1
2
3
4

ul#menu li > ul {
top: auto;
left: auto;
}

Görünümü biraz güzelleştirelim:
?
01
02
03
04
05
06
07
08
09
10
11
12

ul#menu li a {
font: bold 11px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
color: #000;
background: #efefef;
text-decoration: none;
}

ve rollover hali için:
?
1
2
3
4

ul#menu li a:hover {
color: #a00;
background: #fff;
}

Sonra birincil linklerin üzerine gelince ikincil linklerin görünmesi için:
?
1
2
3

ul#menu li:hover ul {
display: block;
}

Önceki makalede belirttiğimiz gibi bu kod IE’de çalışmayacaktır. IE’de çalışması için aşağıdaki kodları yazmalıyız.
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

Ayrıca aşağıdaki kodu da eklemeliyiz.
?
1
2
3

ul#menu li:hover ul, ul#menu li.over ul{
display: block;
}

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

işte sonuç:

şimdiye kadar anlatılan menü kodlarında işin yapısı öğretilmeye çalışılmıştır. Bu kodları kullanarak çok çeşitli menüler yapılabilir, bunu gerek internette arayarak ve gerekse kaynaklar bölümündeki linklere göz atarak görebilirsiniz. Bir çok menü türü bu şekilde tasarlanabilir. alt kademeli, değişik renklerde ve değişik ebatlarda menü yapılabilir.
______________
@tr.gg dısı link yasak
Mesaj13.07.2011, 16:52 (UTC)    
Mesaj konusu:

orjinal like bakarsanız daha iyi sonuc elde edersiniz

not: flood için özür Rolling Eyes
______________
@tr.gg dısı link yasak
Mesaj13.07.2011, 17:07 (UTC)    
Mesaj konusu:

resimli - videolu olursa daha iyi olur anlamadım bunu dw den olanı yokmu Very Happy
Mesaj13.07.2011, 17:08 (UTC)    
Mesaj konusu:

anlamıcak ne war bunda + bu anlatımla ben kendı siteme yatay acılır menu yaptım basit yani elimde arşivimde suan videolu anlatım yok malesef Rolling Eyes
______________
@tr.gg dısı link yasak
Mesaj14.07.2011, 12:57 (UTC)    
Mesaj konusu:

birde ben dw den yapmak istiyorum Rolling Eyes
Mesaj15.07.2011, 12:09 (UTC)    
Mesaj konusu:

arkadaşlar şöylede olabilir ps de bir resim hazırlarım onun üstüne gelince bir bölüm açılır o bölüme yazı - kod eklerim

ikisinden birini söylerseniz sevinirim
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu