Bütün işlemi gerçekleştiren en önemli kısım burası adım adım anlatıyorum.

$('a.Tikla').click(function(){ ..... }

A Taglarından Class’ı Tikla olana tıklanıldığında şunları yap ( … )

$('.AltMenu').slideUp('fast');

Class’ı AltMenu olanların hepsini slideUp yap yani kaldır.

$(this).parent().find('.AltMenu').slideDown('fast');

Burada ise tıklanılan <a> tagında .AltMenu classlı div’i bul ve slideDown yap yani aç komutunu veriyoruz.

Dikey yönde açılır menü veya Yatay menü için hazırlamamız gereken kodlar bunlardır. Şimdi ise html kodlarımızı yazalım.

<div class="kalip">
            <ul>
                <li>
                    <a href="#" title="Grafik Tasarım Medya" class="Tikla">Grafik Tasarım Medya.com</a>
                    <ul class="AltMenu" style="display: none; margin:0; padding: 0; margin-left:10px;">
                        <li><a href="http://www.grafiktasarimmedya.com/hakkimizda" title="Hakkımızda">Hakkımızda</a></li>
                        <li><a href="http://www.grafiktasarimmedya.com/hakkimizda/neden-biz" title="Bizi Tercih Edin">Neden Biz?</a></li>
                        <li><a href="http://www.grafiktasarimmedya.com/hakkimizda/faaliyet-alanimiz" title="Faaliyetlerimiz">Faaliyet Alanımız</a></li>
                        <li><a href="http://www.grafiktasarimmedya.com/hakkimizda/yazar-ol" title="Yazar Olmak İsteyenler">Yazar Ol</a></li>
                        <li><a href="http://www.grafiktasarimmedya.com/gizlilik" title="Gizlilik Hakkında">Gizlilik</a></li>
                        <li><a href="http://www.grafiktasarimmedya.com/ucretli-destek" title="Profosyonel Destek">Ücretli Destek</a></li>
                        <li><a href="http://www.grafiktasarimmedya.com/reklam-ve-sponsorluk" title="Reklamınızı Yayınlayın">Reklam ve Sponsorluk</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="Tikla">GTM Kategori 1</a>
                    <ul class="AltMenu" style="display: none; margin:0; padding: 0; margin-left:10px;">
                        <li><a href="#" title="Örnek Title">Kategori 1-1</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="Tikla">GTM Kategori 2</a>
                    <ul class="AltMenu" style="display: none; margin:0; padding: 0; margin-left:10px;">
                        <li><a href="#" title="Örnek Title">Kategori 2-1</a></li>
                        <li><a href="#" title="Örnek Title">Kategori 2-2</a></li>
                        <li><a href="#" title="Örnek Title">Kategori 2-3</a></li>
                        <li><a href="#" title="Örnek Title">Kategori 2-4</a></li>
                        <li><a href="#" title="Örnek Title">Kategori 2-5</a></li>
                        <li><a href="#" title="Örnek Title">Kategori 2-6</a></li>
                        <li><a href="#" title="Örnek Title">Kategori 2-7</a></li>
                        <li><a href="#" title="Örnek Title">Kategori 2-8</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="Tikla">Kategori 3</a>
                    <ul class="AltMenu" style="display: none; margin:0; padding: 0; margin-left:10px;">
                        <li><a href="#" title="Örnek Title">Kategori 3-1</a></li>
                        <li><a href="#" title="Örnek Title">Kategori 3-2</a></li>
                        <li><a href="#" title="Örnek Title">Kategori 3-3</a></li>
                        <li><a href="#" title="Örnek Title">Kategori 3-4</a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="yatay">
            <ul>
                <li>
                    <a href="#" class="Tiklayatay">GrafikTasarimMedya.com</a>
                    <ul class="YatayAcilan">
                        <li><a href="#" title="Örnek Title">Yatay Açılan 1-1</a></li>
                        <li><a href="#" title="Örnek Title">Yatay Açılan 1-2</a></li>
                        <li><a href="#" title="Örnek Title">Yatay Açılan 1-3</a></li>
                        <li><a href="#" title="Örnek Title">Yatay Açılan 1-4</a></li>
                        <li><a href="#" title="Örnek Title">Yatay Açılan 1-5</a></li>
                        <li><a href="#" title="Örnek Title">Yatay Açılan 1-6</a></li>
                        <li><a href="#" title="Örnek Title">Yatay Açılan 1-7</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#" class="Tiklayatay">GrafikTasarimMedya</a>
                    <ul class="YatayAcilan">
                        <li><a href="#" title="Örnek Title">Yatay Açılan 2</a></li>
                    </ul>

                </li>
                <li>
                    <a href="#" class="Tiklayatay">GTM</a>
                    <ul class="YatayAcilan">
                        <li><a href="#" title="Örnek Title">Yatay Açılan 3-1</a></li>
                        <li><a href="#" title="Örnek Title">Yatay Açılan 3-2</a></li>
                        <li><a href="#" title="Örnek Title">Yatay Açılan 3-3</a></li>
                        <li><a href="#" title="Örnek Title">Yatay Açılan 3-4</a></li>
                        <li><a href="#" title="Örnek Title">Yatay Açılan 3-5</a></li>
                        <li><a href="#" title="Örnek Title">Yatay Açılan 3-6</a></li>
                        <li><a href="#" title="Örnek Title">Yatay Açılan 3-7</a></li>
                        <li><a href="#" title="Örnek Title">Yatay Açılan 3-8</a></li>
                    </ul>

                </li>
                <li>
                    <a href="#" class="Tiklayatay">GTM GTM</a>
                        <ul class="YatayAcilan">
                            <li><a href="#" title="Örnek Title">Yatay Açılan 4-1</a></li>
                            <li><a href="#" title="Örnek Title">Yatay Açılan 4-2</a></li>
                            <li><a href="#" title="Örnek Title">Yatay Açılan 4-3</a></li>
                        </ul>
                </li>
            </ul>
        </div>

Html dosyamızı da oluşturduğumuza göre artık oluşturduğumuz iki dosyayıda FTP adresimize göndererek sonuca bakıyoruz. Örnekleri çoğaltabilir ve css ayarları ile oynayarak istediğiniz renk düzeninide elde edebilirsiniz. Bu konudaki maharet sizin elinizde.

Sayfa: 1 2