Creare javascript onmouseout per menu

PHP

Utente Attivo
9 Mag 2013
105
0
16
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 onmouse:eek:ver che uso).
Per favore aiutatemi!
 

PHP

Utente Attivo
9 Mag 2013
105
0
16
Nessuno lo sà? Avete magari esempi simili che però non fanno esattamente la stessa cosa?
 

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
Posta il codice della pagina sennò dubito che qualcuno ti possa aiutare
 

PHP

Utente Attivo
9 Mag 2013
105
0
16
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:
Codice:
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

Utente Attivo
11 Mag 2013
409
0
0
Scusa, uso solo jQuery per sviluppare in Javascript.

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

Codice:
$('#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

Utente Attivo
9 Mag 2013
105
0
16
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:
Codice:
				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

Utente Attivo
11 Mag 2013
409
0
0
$(".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

Utente Attivo
9 Mag 2013
105
0
16
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?
Codice:
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

Utente Attivo
11 Mag 2013
409
0
0
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
F Creare elementi html con javascript Javascript 2
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
S [Javascript] [HTML] creare stringhe di riferimento da riutilizzare Javascript 5
Monz94 [Javascript] [HTML] Creare Checkbox o Radio con Immagini Javascript 0
D [Javascript] Come creare un equalizzatore HTML collegato a files audio Javascript 1
S [Javascript] Creare mappa per ogni utente Javascript 5
L [Javascript] Creare sezione apri/chiudi in stile Wikipedia Javascript 9
S Consigli per script javascript per creare videogiochi Javascript 2
C File html con procedure javascript per creare effetto libro da sfogliare Javascript 9
C Javascript completo di html per creare una tabella dove compare il saluto in base all'ora. Javascript 2
L creare una libreria javascript Javascript 3
amphioxus creare un quiz con Javascript Javascript 0
P Creare pagina web che supporta javascript Javascript 2
A Problema: creare nuove "option" di una select-list con javascript Javascript 1
B Creare una newsletter (in Javascript)?? Javascript 6
Shyson Modificare codice e creare link PHP 0
Cosina Creare bottone delete in form upload PHP 4
Cosina Creare bottone delete in form upload PHP 1
M Creare un campo input select quantità di un numero intero prelevato dal db PHP 3
L Creare una forma geometrica Photoshop 1
M [Cerco] aiutanti per creare sito Offerte e Richieste di Lavoro e/o Collaborazione 8
S Libreria PHP per creare file dwg o dxf PHP 0
R Come creare sistema Add to homescreen PHP 3
L Creare un countdown con giorno specifico della settimana PHP 3
W Creare link di una dato Classic ASP 0
W creare file .jar Java 2
M Creare con il Vb 2010 Il Classico Notes di Windows Vista Visual Basic 1
MarcoGrazia Creare una password Snippet Javascript 0
J creare pagina php di prenotazione PHP 5
A Creare un modulo di ricerca avanzata con dreamweaver HTML e CSS 0
INTEROPERABILITY Sviluppatrice/formatrice creare APP Offerte e Richieste di Lavoro e/o Collaborazione 0
L Creare una pagina pre-home WordPress 1
G Creare side-bar non visibile da dispositivi mobile HTML e CSS 0
L creare oggetti da una classe tramite un form Javascript 0
Web93 CREARE SITO WEB COMICS CON WORDPRESS WordPress 0
maxnegri Contare sessioni aperte e creare condizione PHP 1
A Come creare pulsante donazione PayPal HTML e CSS 5
L [CERCO] Creare blog su WordPress con tema Divi Offerte e Richieste di Lavoro e/o Collaborazione 3
F Creare un set di date a seconda del frazionamento scelto da inserire in MySQL PHP 6
R [Photoshop] Creare Azione Photoshop 1
F [PHP] creare tabella e tasto cerca PHP 3
B [PHP] Creare PDF dopo inserimento dati form PHP 4
A [HTML] Creare sito web per eLearnig HTML e CSS 2
R Bootstrap 4 - creare una finestra di testo responsive sopra un Carousel jQuery 1
Spenalzo Creare tabelle multiple con Access via VBA MS Access 2
R [PHP] Creare sistema random PHP 3
D [PHP] Consigli su come creare form PHP 1
I Creare Qsl radioamatore con testo editabile Presentati al Forum 1
T [PHP] Creare Honeypot per form contatti PHP 10
S [PHP] Creare collegamento filtri di ricerca al database PHP 6

Discussioni simili