Creare javascript onmouseout per menu

[PHP]

Ho un menu collegato a javascript, che e programmato in modo tale che quando gli passiamo sopra con il mouse i sottomenu si aprono, e subito dopo che siamo usciti con il mouse i menu si chiudono.
Adesso sapendo che i menu sono collegati ad una classe div per la formattazione dei caratteri, ecc; vorrei trovare un modo per non chiudere i sottomenu subito dopo il passaggio del mouse, in pratica vorrei che se andassimo con il mouse nel mezzo della pagina(partendo dal sottomenu che sè stato aperto), il sottomenu deve rimanere aperto per almeno per 2 secondi. Da quello che ho capito dovrei settare onmouseout=function javascript{}.., o comunque roba simile.
Vorrei collegarlo al nome di una classe(in modo da non dover richiamare mouseout ad ogni link, ma farlo in automatico) e avrei bisogno dello scipt di cui non ho nessuna idea di come si faccia(mai usato java, ho solo script prefatti, come quello di onmousever che uso).
Per favore aiutatemi!

 

[PHP]

Nessuno lo sà? Avete magari esempi simili che però non fanno esattamente la stessa cosa?

 

[Nefyt]

Posta il codice della pagina sennò dubito che qualcuno ti possa aiutare

 

[PHP]

Va bene posto il codice .js del menù, comunque la funzione che chiedo sarebbe da creare, questo codice lo uso per tenere nascosto il sottomenu, ecc:

var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}

var jqueryslidemenu={

animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
	jQuery(document).ready(function($){
		var $mainmenu=$("#"+menuid+">ul")
		var $headers=$mainmenu.find("ul").parent()
		$headers.each(function(i){
			var $curobj=$(this)
			var $subul=$(this).find('ul:eq(0)')
			this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
			this.istopheader=$curobj.parents("ul").length==1? true : false
			$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
			$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
				'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
				+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
				+ '" style="border:0;" />'
			)
			$curobj.hover(
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					this._offsets={left:$(this).offset().left, top:$(this).offset().top}
					var menuleft=this.istopheader? 0 : this._dimensions.w
					menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
					$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
				},
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					$targetul.slideUp(jqueryslidemenu.animateduration.out)
				}
			) //end hover
		}) //end $headers.each()
		$mainmenu.find("ul").css({display:'none', visibility:'visible'})
	}) //end document.ready
}
}

//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

 

[Fez Vrasta]

Scusa, uso solo jQuery per sviluppare in Javascript.

Questa funzione dovrebbe attivare la scomparsa del dropdown menu solo dopo 1000 millisecondi:

$('#tuomenu a').bind('mouseout', function()
{
    var thiz = this;
    setTimeout(function()
    {
        $(thiz).parents('li').children('ul').hide();
    }, 1000);
});

è pensato per lavorare con menu fatti con liste <ul> ed <li> dato che la convenzione sulla creazione dei menu propone di usare questi elementi per facilitare il funzionamento degli screen reader. Se vuoi utilizzare per il tuo menu i <div> ed avere un menu non agibile per persone con difficoltà visive adatta il codice personalmente, grazie.

 

[PHP]

Grazie dell'esempio di codice, sono riuscito a creare l'effetto voluto.
Adesso però devo risolvere l'altro problema del menù, non sò se aprire un'altro post, intanto lo scrivo qui..
Ricrivendo il codice ho ottenuto questo:

				function(e){
				var $targetul=$(this).children("ul:eq(0)")
                                setTimeout(function() {
                                $targetul.Hide(1000)//hide in effetti è più carino di slide up qui^^       
                                      }, 3000);

Come vedete l'animazioni di tipo hide dura un secondo ed entra in azione dopo 3 secondi(durante i quali il menu rimane aperto come volevo).
Tuttavia se apro più <ul> rimangono aperti, ad esempio se apro prova1 e 1 secondo dopo prova2, il prima rimane aperto per altri 2 secondi, il secondo per altri 3. Questo effetto non mi interessa, vorrei che rimanesse aperto sempre e solo un singolo sottomenu alla volta(al mouseover su un'altro menu il precedente deve chiudersi immediatamente anche senza il decorso effettivo del tempo). Come potrei fare?

 

[Fez Vrasta]

$(".menu > ul").hide();

metti una cosa del genere nella funzione che apre il menu, in modo che nasconda tutti i menu prima di aprire quello nuovo

 

[PHP]

Grazie per la dritta, ma non riesco ad integrarlo, nel senso che o nasconde tutto il menu o tutto il sottomenu...
Visto che si tratta di mettere un .hide potresti indicarmi sullo script che ti posto la riga precisa?

buildmenu:function(menuid, arrowsvar){
	jQuery(document).ready(function($){

		var $mainmenu=$("#"+menuid+">ul")
		var $headers=$mainmenu.find("ul").parent()//$(".menu > ul").hide();
		$headers.each(function(i){
			var $curobj=$(this)
			var $subul=$(this).find('ul:eq(0)')
			this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
			this.istopheader=$curobj.parents("ul").length==1? true : false
			$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
			$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
				'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
				+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
				+ '" style="border:0;" />'
			)
			$curobj.hover(
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					this._offsets={left:$(this).offset().left, top:$(this).offset().top}
					var menuleft=this.istopheader? 0 : this._dimensions.w
					menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
					$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
				},
				function(e){
				var $targetul=$(this).children("ul:eq(0)")
                                setTimeout(function() {
                                $targetul.slideUp(0)         
                                      }, 1500);
				}
			)
		}) 
		$mainmenu.find("ul").css({display:'none', visibility:'visible'})
	}) 
}
}

jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

 

[Fez Vrasta]

ora sono fuori, appena torno a casa ti dico, se non avrai già risolto da solo.

comunque devi dirgli di nascondere tutti i sottomenu, di solito io gli assegno la classe child ai sub menu, in quel caso basterebbe

$(".child").hide(); dentro, all'inizio,della funzione

bind onclick od onhover, dipende da come hai scelto tu

 

[PHP]

Va bene, grazie mille per l'aiuto.