comment est fait ce sous menu ?

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

Bonjour,

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

8O

Faudra changer la typographie s'est pas jolie :mouarf:

É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 ?

......

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

Citation:

---

Envoyé par 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 ?

......

---

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

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

Merci devyan ( et Marc Hertzog !!) :ccool:

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


@+ , ici ou ailleur !!

Ce menu fonctionne avec aussi javascript :

Dans la feuille de style

Code:

---

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:

---

<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:

---

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

Bonjour,

Citation:

---

Envoyé par CCyrillus

Ce menu fonctionne avec aussi javascript :

Dans la feuille de style

Code:

---

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:

---

<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:

---

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

Citation:

---

Envoyé par 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/