Merhaba arkadaşlar gecenlerde r10′da bir uye manşet menu sistemi istemişti bende hemen yapayım dedim. Genelde uygulamara isim bulmaktan zorlanırım ama bu feed’imde bana yardımcı olan arakdaşlara teşekkurler.

Kod yapısına gecelim .

Css kodlarımız ;

Kod:
.mansetMenuSistemi .mansetMenuSistemi ul .mansetMenuSistemi ul li .mansetMenuSistemi ul li div.resimlerGosterilecek .mansetMenuSistemi ul li img .mansetMenuSistemi ul li img.aktifResim .mansetMenuSistemi ul li a .mansetMenuSistemi ul li a:hover

Html Kodlarımız ;

Kod:



jQuery kodlarımız ;
Kod:
/** * -------------------------------------------------------------------- * jQuery manset menu sistemi * Aycan BULBUL, email protected * Tarih 20 Eylul 2010 * * http://www.aycan.net/ * * -------------------------------------------------------------------- * Kullanim klavuzu * http://www.aycan.net/blog/jquery-ajax-javascript/jquery-manset-menu-sistemi.html * */ /** * Sayfa yuklendiginde **/ $(document).ready(function() else }); });

jQuery kodlarımız cok kalabalık duruyor ama %90′ı acıklamadan oluşuyor şimdi kodları satır satır anlatıyorum.


Kod:
$(document).ready(function());

Sayfa yuklendiğinde.

Kod:
if (resimGorunurlugu == 'block' || resimGorunurlugu == 'inline')

Buradaki if değerimiz acık olan bir menunun uzerine gelindiğinde bir daha o menuye efekt vermesini engellemek.

Kod:
$('.mansetMenuSistemi ul li').find('img').fadeOut('fast');

Onceden acılan resimlerin hepsini kapat (fadeOut(‘fast’);

Kod:
$(this).parent().find('img').fadeIn('normal');

Onceden acılan resimlerin hepsini kapat (fadeOut(‘fast’);

Bu kadar basit arkadaşlar.

Kullanımı ;
Kullanımı cok basittir
1 – Yukarıda vermiş olduğum css kodlarını sayfanıza entegre edin.
2 – Sayfanızda herhangi bir js dosyası ekli değilse şu iki kodu tagları arası bu iki kodu yapıştırın.


Kod:


Eğer sayfanızda ekli olan bir js kodu varsa sadece ab-mansetMenuSistemi.js dosyasını sayfanıza ekleyin.
3 – Html taglarını direk sayfanıza ekleyin. (Gorunum acısından tasarım hoş değil ama bunu kendinize gore ayarlaya bilirsiniz.)

Manşet menu sistemi demo // Manşet menu sistemini indir.