Merhaba arkadaşlar geçenlerde r10’da bir üye manşet menü 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şekkürler.
Kod yapısına geçelim .
Css kodlarımız ;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
.mansetMenuSistemi { width: 190px; overflow: hidden; padding: 5px; border: 1px solid #29447E; } .mansetMenuSistemi ul { width: 190px; overflow: hidden; position: relative; } .mansetMenuSistemi ul li { border-bottom: 1px dashed #6D84B4; padding: 4px; } .mansetMenuSistemi ul li div.resimlerGosterilecek { width: 190px; height: 79px; display: block; } .mansetMenuSistemi ul li a img { position: absolute; top: 0; left: 0; display: none; } .mansetMenuSistemi ul li a img.aktifResim { display: block; } .mansetMenuSistemi ul li a { text-decoration: none; color: #3B5998; font-size: 14px; font-family: "calibri" , serif; display: block; } .mansetMenuSistemi ul li a:hover { text-decoration: underline; } |
Html Kodlarımız ;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!-- ================================================ --> <!-- ! manset menu sistemi baslangic DIV --> <!-- ================================================ --> <div class="mansetMenuSistemi" style="float: left;"> <ul> <li> <div class="resimlerGosterilecek"> </div> </li> <li> <a href="#">menü bir <img src="1.jpg" alt="resim 1 " class="aktifResim"/> </a> </li> <li> <a href="#">menü iki <img src="2.jpg" alt="resim 1 "/> </a> </li> <li> <a href="#">menü üç <img src="3.jpg" alt="resim 1 "/> </a> </li> <li> <a href="#">menü dört <img src="4.jpg" alt="resim 1 "/> </a> </li> </ul> </div> <!-- ================================================ --> <!-- ! manset menu sistemi bitis DIV --> <!-- ================================================ --> |
jQuery kodlarımız ;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
/** * -------------------------------------------------------------------- * jQuery manset menu sistemi * Aycan BULBUL, ab@aycan.net * Tarih 20 Eylul 2010 * * http://www.aycan.net/ * * -------------------------------------------------------------------- * Kullanim klavuzu * http://www.aycan.net/jquery-ajax-javascript/jquery-manset-menu-sistemi.html * */ /** * Sayfa yuklendiginde **/ $(document).ready(function () { /** * Menu icerisindeki herhangi bir a taginin uzerine gelindiginde (hover durumu gerceklestiginde). **/ $('.mansetMenuSistemi ul li a').hover(function () { /** * Uzerine gelinen a taginin içinde img yani resim ara (find) * sonra resmin display degerini al (css.('display');) **/ var resimGorunurlugu = $(this).find('img').css('display'); /** * Buradaki if degerimiz acik olan bir menunun uzerine gelidiginde * bir daha o menuye efekt vermesini engellemek. **/ if (resimGorunurlugu == 'block' || resimGorunurlugu == 'inline') { /** * Eger resmimiz suan aktif sekilde gorukuyorsa * hic birsey yapma. **/ } else { /** * Illkez acilacak bir resimse onceden acilan resimlerin hepsini kapat (fadeOut('fast');) **/ $(this).parent().parent().find('img').fadeOut('fast'); /** * Butun resimler kapandiktan sonra uzerine gelinen resmi goster (fadeIn('normal');) **/ $(this).find('img').fadeIn('normal'); } }); }); |
jQuery kodlarımız çok kalabalık duruyor ama %90’ı açıklamadan oluşuyor şimdi kodları satır satır anlatıyorum.
|
1 |
$(document).ready(function(){ .... }); |
Sayfa yüklendiğinde.
|
1 |
$('.mansetMenuSistemi ul li a').hover(function(){ .... }); |
Menü içerisindeki herhangi bir a tagının üzerine gelindiğinde (hover durumu gerçekleştiğinde).
|
1 |
var resimGorunurlugu = $(this).find('img').css('display'); |
Üzerine gelinen a tagının içinde img yani resim ara (find) sonra resmin display değerini al (css.(‘display’);)
|
1 |
if (resimGorunurlugu == 'block' || resimGorunurlugu == 'inline'){ ... } |
Buradaki if değerimiz açık olan bir menünün üzerine gelindiğinde bir daha o menüye efekt vermesini engellemek.
|
1 |
$(this).parent().parent().find('img').fadeOut('fast'); |
Önceden açılan resimlerin hepsini kapat (fadeOut(‘fast’);
|
1 |
$(this).find('img').fadeIn('normal'); |
Önceden açılan resimlerin hepsini kapat (fadeOut(‘fast’);
Bu kadar basit arkadaşlar.
Kullanımı ;
Kullanımı çok 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.
|
1 2 |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="kutuphane/js/ab-mansetMenuSistemi.js"></script> |
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. (Görünüm açısından tasarım hoş değil ama bunu kendinize göre ayarlaya bilirsiniz.)
Çok güzel olmuş tebrikler…
manşet menülerine oldukça ilgi duyarım ve bunuda çok sevdim ellerine sağlık aycan abi.
Ellerine Sağlık…
menü 4 süper olmuş 😉 😀
Eline Sağlık Kardeşim… Yine her zaman ki gibi çok değerli bir makale olmuş… Arşive aldım inş. iler ki projelerde kullanırım inş…
tbrkler
wooovv gerçekten güzel bu ugulamanın benzeri mynettede vardır tebrik ederim süper olmuş Aycan kardeşim
Yorum satırları kullanmanız anlaşılabilirlik açısından iyi olmuş. Kodlarda gayet güzel. Tebrikler.
Teşekkür ederim arkadaşlar.
resimleri sağ tarafa alabilirmisin aycan birde öyle görebilirmiyiz, oradaki resimler otomatik mi boyutlandırılıyor acaba
@depresan resimleri sağ tarafa left ve right değerleri ile kolay bir şekilde alabiliriz. Bu makalede o değişikliği yaparsam kullanıcıların kafaso karışabilir, ayrıca resimler otomatik boyutlanmıyor sen resimleri o boyutta oraya koyman lazım herhangi bir dil ile.
Eywallah tesekkürler aycanim… Isime yaradi.
Kodlarda gayet güzel teşekkürler.
Teşekkürler Güzel bir uygulama olmuş.
hocam.. bu resimlerin efekt geçişlerini nasıl normal yapabilirim.. Efektsiz.. teşekkürler ilginiz için.. Görüşmek üzere. Gerçektende çok güzel birşey olmuş.
@Yazılımevi fadeOut ve fadeIn değerlerinin içine 0 yazarsanız geçişler minumum seviyeye dönecektir.
Aycanim harika olmus, eline saglik 🙂
Merhaba
bu kodları php ye nasıl entegre ederiz
Kodlar sunlar
echo “\r\n”;
$sns = mysql_query( “SELECT id,hadi,hres,hust FROM haber WHERE anasayfa=’1′ ORDER BY id desc limit 4” );
while ( $sor = mysql_fetch_array( $sns ) )
{
$hlink = linkyap( “haber”, $sor[‘hadi’], $sor[‘id’] );
$otman = “156,”;
echo “\r\n“;
echo $sor[‘hadi’];
echo “”;
echo “\r\n”;
}
Güven ben kodlarınızdan birşey anlaşılmıyor.
merhaba
cevabınız için teşekkürler
Kodları buraya ekleyemiyorum ekledigimde yarısı gorunuyor nasıl paylasaşa bilirim
Url ver
As a designer i just wanted to point out that you have a very nice site , I enjoy the style and design, it really looks good.
cok süper ya.
çok güzel olmuş eline sağlık
Hocam sağa alamadım bir türlü yazıları, yardımcı olur musun?
hocam harika olmuş eline sağlık
Güzel bir çalışma olmuş emeğine sağlık…
Bahsettiğiniz Manşetin Orjinali: http://jquery.malsup.com/cycle/
2. Sürümü de: http://jquery.malsup.com/cycle2/
Bu adreslerden daha detaylı bilgi edinebilirsiniz, ama sadece ingilizce…
çok faydali bir içerik olmuş. uzun zamandır düşündüğüm bir sorunu çözmemde bana kaynak oldu. teşekkür ederim.