jQuery Manşet menü sistemi

AycanB · 5 Kasım 2010

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 feedimde bana yardımcı olan arakdaşlara teşekkürler.

Kod yapısına geçelim .

Css kodlarımız ;

Kod:

.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 img{position: absolute; top: 0; left: 0; display: none;}
        .mansetMenuSistemi ul li 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 ;

Kod:

<!-- ================================================ -->
<!-- ! manset menu sistemi baslangic DIV              -->
<!-- ================================================ -->
<div class="mansetMenuSistemi">
    <ul>
        <li>
            <div class="resimlerGosterilecek">  </div>
        </li>
        <li>
            <a href="#">menü bir</a>
            <img src="1.jpg" alt="resim 1 " class="aktifResim"/>
        </li>
        <li>
            <a href="#">menü iki</a>
            <img src="2.jpg" alt="resim 1 "/>
        </li>
        <li>
            <a href="#">menü üç</a>
            <img src="3.jpg" alt="resim 1 "/>
        </li>
        <li>
            <a href="#">menü dört</a>
            <img src="4.jpg" alt="resim 1 "/>
        </li></strong>
    </ul>
</div>
<!-- ================================================ -->
<!-- ! manset menu sistemi bitis DIV                  -->
<!-- ================================================ -->

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(){
    /**
     * Menu icerisindeki herhangi bir a taginin uzerine gelindiginde (hover  durumu gerceklestiginde).
     **/
    $('.mansetMenuSistemi ul li a').hover(function(){
        /**
         * Uzerine gelinen a taginin bir ustune cik (parent), orada img yani resim ara (find)
         * sonra resmin display degerini al (css.('display');)
         **/
        var resimGorunurlugu =  $(this).parent().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');)
             **/
            $('.mansetMenuSistemi ul li').find('img').fadeOut('fast');
            /**
             * Butun resimler kapandiktan sonra uzerine gelinen resmi goster (fadeIn('normal');)
             **/
            $(this).parent().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.

Kod:

$(document).ready(function(){  ....   });

Sayfa yüklendiğinde.

Kod:

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.

Kod:

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

Önceden açılan resimlerin hepsini kapat (fadeOut(fast);

Kod:

$(this).parent().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.

Kod:

<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.)

Manşet menü sistemi demo // Manşet menü sistemini indir.

jQuery Manşet menü sistemi

AycanB

0