Forum

DropDown Menü
 
Bildirimler
Hepsini Temizle

DropDown Menü

10 Yazılar
3 Üyeler
0 Reactions
546 Görüntüleme
(@AliYilmaz)
Gönderiler: 69
Estimable Member
Konu başlatıcı
 

Arkadaşlar merhaba aşağıdaki sitedeki menüyü yapmak istiyorum.
http://tympanus.net/Blueprints/HorizontalSlideOutMenu/   

Projeme ekledim.Fakat menü açıldığı zaman aşağıdaki divi ittirmesini istiyorum.Örnek :  http://www.shakeshack.com/food-and-drink/ Bunu nasıl yapabilirim.Aşağıda menü kodlarım ve javascript paylaşıyorum.

----Html Menü ---- 

<nav class="cbp-hsmenu-wrapper" id="cbp-hsmenu-wrapper">

                <div class="cbp-hsinner">

                    <ol class="parent">

                        <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?ForumID=49#">Anasayfa</a></li>

                        <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?ForumID=49#">Hakkımızda</a></li>

                        <li>

                            <a href="http://www.cozumpark.com/forums/AddPost.aspx?ForumID=49#">Ürünler</a>

                            <ol class="child">

                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?ForumID=49#">

                                    <img src="img/logom.jpg" alt="img01" /><span>Delicate Wine</span></a></li>

                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?ForumID=49#">

                                    <img src="img/2.png" alt="img02" /><span>Fine Spirit</span></a></li>

                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?ForumID=49#">

                                    <img src="img/3.png" alt="img03" /><span>Heavenly Ale</span></a></li>

                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?ForumID=49#">

                                    <img src="img/4.png" alt="img04" /><span>Juicy Lemonade</span></a></li>

                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?ForumID=49#">

                                    <img src="img/5.png" alt="img05" /><span>Wise Whiskey</span></a></li>

                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?ForumID=49#">

                                    <img src="img/6.png" alt="img06" /><span>Sweet Rum</span></a></li>

                            </ol>

                        </li>

                        <li>

                            <a href="http://www.cozumpark.com/forums/AddPost.aspx?ForumID=49#">Referanslar</a>

                            <ol class="child">

                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?ForumID=49#">

                                    <img src="img/1.png" alt="img01" /><span>Delicate Wine</span></a></li>

                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?ForumID=49#">

                                    <img src="img/2.png" alt="img02" /><span>Fine Spirit</span></a></li>

                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?ForumID=49#">

                                    <img src="img/3.png" alt="img03" /><span>Heavenly Ale</span></a></li>

                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?ForumID=49#">

                                    <img src="img/4.png" alt="img04" /><span>Juicy Lemonade</span></a></li>

                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?ForumID=49#">

                                    <img src="img/5.png" alt="img05" /><span>Wise Whiskey</span></a></li>

                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?ForumID=49#">

                                    <img src="img/6.png" alt="img06" /><span>Sweet Rum</span></a></li>

                            </ol>

                        </li>


                        <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?ForumID=49#">İletişim</a></li>

                    </ol>

                </div>

            </nav> 

 ---Javascript--- 

    <script type="text/javascript">

        $('.child').hide();

        $('.parent > li > a').click(function () {

            $('.show').click(function () {               

            });

            $(this).parent().find('.child').slideToggle('slow');

        });

    </script> 

Burada sadece bir mantık hatası var.Menülere tek tek tıklayınca sorun yok açılıp kapanıyor.Ama Mesela Ürünlere bastım açtım aynı zamanda referanslara bastığım zaman karışıyor..Bu kod yanlış ise yukarıda paylaştığım Javascriptler den biri uyar mı? Yada aşağıdaki kodda bir kaç değişiklik mi yapmak gerekiyor.Yardımlarınızı bekliyorum.

 
Gönderildi : 05/01/2015 20:32

(@eravse)
Gönderiler: 1753
Üye
 

  $('.parent > li > a').click(function () { ıcerısıne bır kere daha hıde yapman lazım gıbı cunku sen basta bır kere hıde edıyorsun  tıklıyıp acııyorsun dıgerı acık kalıyor acmadan once dıger hepsını kapat duzelıcek gıbı 

ProfectSoft Yazılım ve Danışmanlık Hizmetleri
LogPusher & Bifyou E-Commerce System
www.profectsoft.com

 
Gönderildi : 05/01/2015 20:45

(@AliYilmaz)
Gönderiler: 69
Estimable Member
Konu başlatıcı
 
 Bu şekilde yaptım olmadı.Bu şekilde daha çok yaklaştım.Dediğiniz şekilde 
        $('.child').hide();
        $('.parent > li > a').click(function () {
            $('.show').click(function () {
                $('.child').hide();
            });
            $(this).parent().find('.child').slideToggle('slow');
        });
 
 
 Aşağıdaki gibi yapınca daha çok yaklaştım.Aşağıdakinde mesela bir ürünlere bir referanslar menüsüne tıklayınca açılıyor.Fakat aynı menüye iki kere basınca resimler gelmiyor.Arka planı duruyor.
 
 
        $('.child').hide();
        $('.parent > li > a').click(function () {
           
                $('.child').hide();
       
            $(this).parent().find('.child').slideToggle('slow');
        });
 
 
 
 
Gönderildi : 05/01/2015 21:08

(@eravse)
Gönderiler: 1753
Üye
 

bir url ye atıp ornek olan kısmı bızım ıle paylasırmısın bır debug edelım ??

ProfectSoft Yazılım ve Danışmanlık Hizmetleri
LogPusher & Bifyou E-Commerce System
www.profectsoft.com

 
Gönderildi : 06/01/2015 00:48

(@AliYilmaz)
Gönderiler: 69
Estimable Member
Konu başlatıcı
 

http://test.avrasyademo.xyz/  test2 ' ye tıklayarak ulaşabilirsiniz.Teşekkürler.

 
Gönderildi : 06/01/2015 01:43

(@eravse)
Gönderiler: 1753
Üye
 

Senın sorunun classlarla alakalı sen sayfada ıkı yerde chıld classını kullanmıssın bence menu ıcın verdıgın classı dıger baska yerde kullanma asagıda bır slıder gıbı ogede gordum sankı kapatıp acınca oda kapanıp acılıyor onu bır kontrol edermısın ?

 

ProfectSoft Yazılım ve Danışmanlık Hizmetleri
LogPusher & Bifyou E-Commerce System
www.profectsoft.com

 
Gönderildi : 06/01/2015 02:08

(@AliYilmaz)
Gönderiler: 69
Estimable Member
Konu başlatıcı
 
Başka bir yerde yok.İki yerde kullandığım.Hem Ürünler menüsü hemde Referanslar Menüsünde Child class var.Referanslar menüsünden kaldırırsam ozaman referanslar menüsünün bir özelliği kalmıyor. 
 
<nav class="cbp-hsmenu-wrapper" id="cbp-hsmenu-wrapper">
                <div class="cbp-hsinner">
                    <ol class="parent">
                        <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?PostID=451384#">Anasayfa</a></li>
                        <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?PostID=451384#">Hakkımızda</a></li>
                        <li>
                            <a href="http://www.cozumpark.com/forums/AddPost.aspx?PostID=451384#">Ürünler</a>
                            <ol class="child" style="display: none;">
                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?PostID=451384#">
                                    <img src="img/logom.jpg" alt="img01" /><span>Delicate Wine</span></a></li>
                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?PostID=451384#">
                                    <img src="img/2.png" alt="img02" /><span>Fine Spirit</span></a></li>
                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?PostID=451384#">
                                    <img src="img/3.png" alt="img03" /><span>Heavenly Ale</span></a></li>
                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?PostID=451384#">
                                    <img src="img/4.png" alt="img04" /><span>Juicy Lemonade</span></a></li>
                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?PostID=451384#">
                                    <img src="img/5.png" alt="img05" /><span>Wise Whiskey</span></a></li>
                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?PostID=451384#">
                                    <img src="img/6.png" alt="img06" /><span>Sweet Rum</span></a></li>
                            </ol>
                        </li>
                        <li>
                            <a href="http://www.cozumpark.com/forums/AddPost.aspx?PostID=451384#">Referanslar</a>
                            <ol class="child" style="display: none;">
                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?PostID=451384#">
                                    <img src="img/1.png" alt="img01" /><span>Delicate Wine</span></a></li>
                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?PostID=451384#">
                                    <img src="img/2.png" alt="img02" /><span>Fine Spirit</span></a></li>
                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?PostID=451384#">
                                    <img src="img/3.png" alt="img03" /><span>Heavenly Ale</span></a></li>
                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?PostID=451384#">
                                    <img src="img/4.png" alt="img04" /><span>Juicy Lemonade</span></a></li>
                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?PostID=451384#">
                                    <img src="img/5.png" alt="img05" /><span>Wise Whiskey</span></a></li>
                                <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?PostID=451384#">
                                    <img src="img/6.png" alt="img06" /><span>Sweet Rum</span></a></li>
                            </ol>
                        </li>
                        <li><a href="http://www.cozumpark.com/forums/AddPost.aspx?PostID=451384#">İletişim</a></li>
                    </ol>
                </div>
            </nav>
 
Gönderildi : 06/01/2015 03:41

(@AliYilmaz)
Gönderiler: 69
Estimable Member
Konu başlatıcı
 

Yokmu bilen fikri olan..

 
Gönderildi : 06/01/2015 22:34

(@www-rizasahan-com)
Gönderiler: 18033
_
 

Merhaba,
http://www.sothink.com/product/dhtmlmenu/ burayı incelemelisiniz.
Ayrıca  https://rizasahan.wordpress.com/2014/11/26/basit-intranet-mimarisi-kurulumu/ buna ufaktan göz atın.

1984 doğumluyum. 4 yaşından bu yana İstanbul’da yaşıyorum. Sırası ile aşağıdaki okullarda eğitim gördüm. Paşaköy ilkokulu (1990-1995) Kartal Zekeriyya Güçer İlköğretim Okulu(1995-1998) Ümraniye Teknik ve Endüstri Meslek Lisesi Bilgisayar Bölümü(1998-2001) Kocaeli Üniversitesi Bilgisayar Programcılığı(2002-2004) Anadolu Ünv. İşletme Fakültesi(2006-2009) Lise yıllarından sonra bir bilgisayar firmasının teknik servisinde mesleğe merhaba dedim. Outsource olarak Citibank ytl ve bina taşınma projesinde yer alarak 8 ay görev yaptım. Bu görevden sonra şu an çalışmakta olduğum yerde bilgi işlem sorumlusu olarak göreve başladım ve 18 yıldır görevimin başındayım.

 
Gönderildi : 06/01/2015 22:41

(@AliYilmaz)
Gönderiler: 69
Estimable Member
Konu başlatıcı
 

Benim ihtiyacım olan sadece Javascript yukarıdaki kodlarıma bakarsanız vede linke bakarsanız anlarsınız hatayı.

 
Gönderildi : 06/01/2015 23:10

Paylaş: