Discussion :

[bilcosby]

Bonjour à tous.
Un petit défi..., je suis tomber sur ce site :(c'est pas de la pub !!)
http://www.lesbauxdeprovence.com/les...provence.html#
Sur le menu de gauche commençant par 'accueil', les sous menu apparaissent en roll-hover et ce n'est pas en javascript, et malgré mes efforts pour décortiquer le code je n'est tjrs pas compris comment c'est conçu.
Ça ma tout l'air de fonctionner grâce aux css, mais je cale..

Merci de votre aide

[devyan]

Bonjour,

Avec ta souris, tu fais bouton droit puis afficher la source.
Ensuite, tu regardes comment est fait le menu

[tsunamichups]

Faudra changer la typographie s'est pas jolie

[bilcosby]

Évidement que j'ai affiché la source
J'ai essayé de disséquer avec Firebug..
Mais j'ai pas trouvé.
Est-ce qu'il est possible de faire ça juste en CSS ?

......

[devyan]

En fait cela ressemble fortement à un menu CSS

Si tu ne prends le contenu du DIV d'id menu et toutes les déclarations CSS commençant par #menu et tu devrais avoir le code du menu...

devyan

[devyan]

Évidement que j'ai affiché la source
J'ai essayé de disséquer avec Firebug..
Mais j'ai pas trouvé.
Est-ce qu'il est possible de faire ça juste en CSS ?

......

Oui, il y a d'ailleurs il me semble plusieurs exemples dans la galerie CSS

[bilcosby]

Apparemment ce serait du style de Marc Hertzog (le dernier !)
Car tout les autre utilisent du javascript..

Merci devyan ( et Marc Hertzog !!)

je vais 'dépioter' tout ça !!


@+ , ici ou ailleur !!

[CCyrillus]

Ce menu fonctionne avec aussi javascript :

Dans la feuille de style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#menu li:hover ul, #menu li.sfhover ul {
	visibility:visible;
}
#menu li li:hover ul, #menu li li.sfhover ul {
	visibility:visible;
	margin-left:200px;
	margin-top:-30px;
}

dans head

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="/templates/baux-de-provence/js/suckerfish.js" type="text/javascript"></script>

et suckerfish.js (ou dans script.js .... on retrouve deux fois la fonction ! ,+ le css ... si avec tout ça ça marche pas ... ):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function sfHover() {
	var sfEls = document.getElementById("menu").getElementsByTagName("li");
 
	for ( var i = 0; i < sfEls.length; i++ ) {
		sfEls[i].onmouseover = function() {
				this.className += " sfhover";
			}
		sfEls[i].onmouseout = function() {
				this.className = this.className.replace(new RegExp(" sfhover\\b"), "");
			}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Cordialement
GC

[devyan]

Bonjour,

Ce menu fonctionne avec aussi javascript :

Dans la feuille de style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#menu li:hover ul, #menu li.sfhover ul {
	visibility:visible;
}
#menu li li:hover ul, #menu li li.sfhover ul {
	visibility:visible;
	margin-left:200px;
	margin-top:-30px;
}

dans head

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="/templates/baux-de-provence/js/suckerfish.js" type="text/javascript"></script>

et suckerfish.js (ou dans script.js .... on retrouve deux fois la fonction ! ,+ le css ... si avec tout ça ça marche pas ... ):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function sfHover() {
	var sfEls = document.getElementById("menu").getElementsByTagName("li");
 
	for ( var i = 0; i < sfEls.length; i++ ) {
		sfEls[i].onmouseover = function() {
				this.className += " sfhover";
			}
		sfEls[i].onmouseout = function() {
				this.className = this.className.replace(new RegExp(" sfhover\\b"), "");
			}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Cordialement
GC

J'ai testé le site en question en désactivant le javascript dans les options de mon navigateur et n'ai pas noté de différence de fonctionnement

devyan

[CCyrillus]

Ce menu fonctionne avec aussi javascript :

...
et suckerfish.js (ou dans script.js .... on retrouve deux fois la fonction ! ,+ le css ... si avec tout ça ça marche pas ... ):
...

Ce type de js est aussi servi a l'attention de IE6 (entre autre config possible) mais une fois suffit !

En grossier : ce montage bricolé n'est pas une référence a prendre pour vos menu déroulant ... puis , comment qui marche ce menu sans souris ?


<edit>
Le script de Patrick Griffiths et Dan Webb http://www.htmldog.com/articles/suckerfish/dropdowns/