.hover yapıldığında alt menü hep açık kalsın

15-11-2015, 23:56:16

Merhaba arkadaşlar,

aşağıda ki gibi bir menüm var.

<nav class="menu">
						<ul>
							<li><a href="#">Ansayfa</a></li>
							<li><a href="#">Hakkımda</a>
								<ul>
									<li><a href="#">Misyonumuz</a></li>
									<li><a href="#">Vizyonumuz</a></li>
									<li><a href="#">Biz Kimiz?</a>
										<ul>
											<li><a href="#">Sadece HTML</a></li>
											<li><a href="#">PHP Dersleri</a></li>
											<li><a href="#">Photoshop</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li><a href="#">Reklam Ver</a></li>
							<li><a href="#">Arşiv</a></li>
							<li><a href="#">İletişim</a></li>
						</ul>
					</nav>

HTML yapısından anlayacabileceğiniz gibi alt menülere sahip.

ul li ul li ul li şeklinde. Yani bir menünün alt menüsü, o alt menünde bir alt menüsü olabiliyor.

Jquery kodlarım aşağı da ki şekilde

$(document).ready(function () {
    $(".menu a").hover(function () {
        $(this).parent("li").children("ul").slideToggle();
        if ($(this).next("ul").css("display") == 'none') {
            $(this).next("ul").slideToggle();
        }
    });
});

Şimdi ben alt menüsü olan menünün üzerine geldiğimde slideToggle efekti ile aşağı doğru açılmakta. Ancak menüdeden alt menüye geçene kadar alt menü kapanmakta. Ben istiyorum ki hover işlemi yapıldıktan sonra bir 10 saniye boyunca alt menü kapanmasın ve alt menüye geçilebilsin. Nasıl yaparız bunu?

16-11-2015, 10:53:01

#2

halil2233

anladıgım kadarı ile delay yanı animasyonu bekletme işlemini kullanabilirsn

17-11-2015, 21:13:28

#3

bluexpres

merhaba,
css'iniz şu şekilde mi tam bilemiyorum ;
.menu ul ul{
display:none;
}

fakat kodlarınızı şöyle denerseniz sanıyorum sorun çözülecektir.

$(document).ready(function () {
    $(".menu li").hover(function () {
        $(this).children("ul").slideToggle();
        if ($(this).next("ul").css("display") == 'none') {
            $(this).next("ul").slideToggle();
        }
    });
});

a'dan değil de li'den ilerlersek li içindeki ul üzerindeyken de toggle işler.

kolaylıklar.

Tonks adlı üyeden alıntı: mesajı görüntüle

Merhaba arkadaşlar,

aşağıda ki gibi bir menüm var.

<nav class="menu">
						<ul>
							<li><a href="#">Ansayfa</a></li>
							<li><a href="#">Hakkımda</a>
								<ul>
									<li><a href="#">Misyonumuz</a></li>
									<li><a href="#">Vizyonumuz</a></li>
									<li><a href="#">Biz Kimiz?</a>
										<ul>
											<li><a href="#">Sadece HTML</a></li>
											<li><a href="#">PHP Dersleri</a></li>
											<li><a href="#">Photoshop</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li><a href="#">Reklam Ver</a></li>
							<li><a href="#">Arşiv</a></li>
							<li><a href="#">İletişim</a></li>
						</ul>
					</nav>

HTML yapısından anlayacabileceğiniz gibi alt menülere sahip.

ul li ul li ul li şeklinde. Yani bir menünün alt menüsü, o alt menünde bir alt menüsü olabiliyor.

Jquery kodlarım aşağı da ki şekilde

$(document).ready(function () {
    $(".menu a").hover(function () {
        $(this).parent("li").children("ul").slideToggle();
        if ($(this).next("ul").css("display") == 'none') {
            $(this).next("ul").slideToggle();
        }
    });
});

Şimdi ben alt menüsü olan menünün üzerine geldiğimde slideToggle efekti ile aşağı doğru açılmakta. Ancak menüdeden alt menüye geçene kadar alt menü kapanmakta. Ben istiyorum ki hover işlemi yapıldıktan sonra bir 10 saniye boyunca alt menü kapanmasın ve alt menüye geçilebilsin. Nasıl yaparız bunu?

17-11-2015, 21:21:22

#4

Tonks

bluexpres adlı üyeden alıntı: mesajı görüntüle

merhaba,
css'iniz şu şekilde mi tam bilemiyorum ;
.menu ul ul{
display:none;
}

fakat kodlarınızı şöyle denerseniz sanıyorum sorun çözülecektir.

$(document).ready(function () {
    $(".menu li").hover(function () {
        $(this).children("ul").slideToggle();
        if ($(this).next("ul").css("display") == 'none') {
            $(this).next("ul").slideToggle();
        }
    });
});

a'dan değil de li'den ilerlersek li içindeki ul üzerindeyken de toggle işler.

kolaylıklar.

.menu ul li ul li ul li şeklinde hocam. Maalesef li'den seçmiyor, onu bende denemiştim, sonucu vermemişti jQuery.

17-11-2015, 23:48:02

#5

bluexpres

sanıyorum copy paste yapmadınız sadece selector'u değiştirdiniz. parent("li") çıkarttım kodlarınızdan.
http://jsfiddle.net/vpkebr9a/ şuradan bakabilirsiniz, çalışıyor.

18-11-2015, 04:32:53

#6

Tonks

bluexpres adlı üyeden alıntı: mesajı görüntüle

sanıyorum copy paste yapmadınız sadece selector'u değiştirdiniz. parent("li") çıkarttım kodlarınızdan.
http://jsfiddle.net/vpkebr9a/ şuradan bakabilirsiniz, çalışıyor.

oldu hocam teşekkür ederim