Ciao a tutti,
volevo sapere se è possibile, e nel caso come ottenerlo, questo effetto sul menù come in questo sito:
Link
Ovvero andando onmouseover su un link gli altri si scuriscono.
Grazie a tutti.
Ciao a tutti,
volevo sapere se è possibile, e nel caso come ottenerlo, questo effetto sul menù come in questo sito:
Link
Ovvero andando onmouseover su un link gli altri si scuriscono.
Grazie a tutti.
Ciao Mexican,
l'effetto sul menu di quella pagina non è stato ottenuto con i CSS ma con Jquery, il codice javascript che lo esegue sta nel file
http://www.chanel.com/js/index.js
Spiegare come funziona non è semplicissimo, ma in sostanza quando il mouse va sopra una voce di menu questa riga di codice aggiunge la classe "disable" a tutti gli elementi figli di <ul> (cioè i[*]) che quindi si scuriscono
La riga successiva invece rimuove la class dall'elemento corrente che così si schiarisce:codice:$(this).parents('ul').children('li').addClass('disable');
codice:$(this).removeClass('disable');
Se non sbagli ora e di nuovo, è segno che non vuoi correre rischi. [W.Allen]
Mmmm mi sa che ci vuole troppo tempo!!! E poi non si capisce molto bene da li!Originariamente inviato da sandrone65
Ciao Mexican,
l'effetto sul menu di quella pagina non è stato ottenuto con i CSS ma con Jquery, il codice javascript che lo esegue sta nel file
http://www.chanel.com/js/index.js
Spiegare come funziona non è semplicissimo, ma in sostanza quando il mouse va sopra una voce di menu questa riga di codice aggiunge la classe "disable" a tutti gli elementi figli di <ul> (cioè i[*]) che quindi si scuriscono
La riga successiva invece rimuove la class dall'elemento corrente che così si schiarisce:codice:$(this).parents('ul').children('li').addClass('disable');
codice:$(this).removeClass('disable');
Peccato che non ci sia un esempio in rete che fa una cosa simile!
Non è difficile usando Jquery, ti ho scritto un esempio che non sarà bello ma funziona.Originariamente inviato da mexican
Mmmm mi sa che ci vuole troppo tempo!!! E poi non si capisce molto bene da li!
Peccato che non ci sia un esempio in rete che fa una cosa simile!
(spero che i moderatori chiudano un occhio perchè questo post andrebbe nel forum del Javascript)
Il javascript è molto semplice: quando si verifica l'evento HOVER su un elemento[*]($('#menu > ul > li').hover) il selettore SIBLINGS seleziona tutti i[*] fratelli e gli applica il metodo FadeTo, che consente un gradevole fading (sfumatura non istantanea ma graduale) impostanto l'opacità degli elementi a 0.3. La seconda parte della funzione consente di far tornare l'opacità di tutti i[*] ad 1.0 quando il mouse se ne va.codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Test</title> </head> <style type="text/css"> <!-- body {background:#000;} #menu ul li {background:#fff;color:#000;float:left;margin: 10px;} --> </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#menu > ul > li').hover( function () { var $this = $(this); $this.siblings().stop().fadeTo(300,0.3); },function () { var $this = $(this); $(this).siblings().stop().fadeTo(300,1); });}); </script> <body> <div id="menu"> <ul>[*]Menu1[*]Menu1[*]Menu1[*]Menu1[*]Menu1[/list] </div> </body> </html>
Spero ti sia utile :-)
Ciao
Se non sbagli ora e di nuovo, è segno che non vuoi correre rischi. [W.Allen]
Grazie mi è utilissimo!!!
RisoltoOriginariamente inviato da mexican
Grazie mi è utilissimo!!!
Grazie ancora.
Permessi di invio
Rispondi quotando