MENU DYNAMIQUE CSS À 100%

cs_lanner Messages postés 131 Date d'inscription samedi 16 avril 2005 Statut Membre Dernière intervention 8 avril 2015 - 2 nov. 2008 à 11:06
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 - 16 déc. 2008 à 14:54
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

https://codes-sources.commentcamarche.net/source/48352-menu-dynamique-css-a-100

Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 7
16 déc. 2008 à 14:54
Cyrphp -> Je nuances la source que tu as posté. Il est impossible de faire des sous-menus à cause principalement de l'utilisation de la balise a. Toutes les exemples postés avant (y compris la mienne) peuvent avoir des sous-menus à l'infini ce que la source que tu présentes ne peut pas faire. C'est pas vraiment la même chose que la source que j'ai posté.
lakichemole Messages postés 253 Date d'inscription vendredi 13 juin 2003 Statut Membre Dernière intervention 18 mai 2009
16 déc. 2008 à 10:47
Faut un bac +5 pour utiliser ce menu :)
cyrphp Messages postés 18 Date d'inscription dimanche 17 octobre 2004 Statut Membre Dernière intervention 13 avril 2009
15 déc. 2008 à 21:37
Zut , url trop longue :
http://yidille.free.fr/plux/valign/?16-
Cliquez sur le mot ICI en gras pour voir la page démo ,

sinon , recomposé l'url :
allez dans le repertoire :
http://gcyrillus.free.fr/essai/
et le fichier est :
menu-deroulan-1niveau-compatible-IE-6-sans-js-valide.html

Bonsoir.
cyrphp Messages postés 18 Date d'inscription dimanche 17 octobre 2004 Statut Membre Dernière intervention 13 avril 2009
15 déc. 2008 à 21:32
bonsoir/bonjour
bon un peu tardif ce retour sur le sujet , entre temps et a propos du (des) zip du site , c'est Alzip qui scotche sur les archives ...

Je viens de mettre en ligne un menu deroulant basé sur li:hover .

Avec une surcouche css en commentaire conditionnel pour IE6 pour le rendre compatible sans js .
Le fonctionnement dans IE6 est un peu different , c'est basé sur le click (a:active) , ç'est pas top , et son fonctionement ressemble fort a un menu en js basic ...

voila : http://gcyrillus.free.fr/essai/menu-deroulan-1niveau-compatible-IE-6-sans-js-valide.html

Tu peut le joindre a ton archive en tout ou partie si tu l'estime interessant . Je le prefere de loin a la bricole de bidouille basé sur l'image map , mais j'aime personnellement pas trop son comportement dans IE6 , enfin , c'est toi qui voit.

GC
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 7
16 nov. 2008 à 16:54
Bon le zip a été uploadé et j'ai rajouté dans la conclusion la version alternative de gauvain. Cyrphp si tu hosts ton script sur un site je vais aussi le rajouté le lien vers ta version aussi.
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 7
16 nov. 2008 à 16:41
Pour le zip, je vais le re-uploadé et si tu as toujours des problèmes avec, fais juste re-posté un commentaire.

En passant span est une balise valide qui est l'équivalent de div, mais "inline". Il est même plus approprié de l'utiliser parce que c'est utiliser de façon "inline" et non de façon "block". C'est une balise qui a tout simplement été oublié avec le temps.

Pour le reste me connaissant, je ne poursuivrai pas le sujet non plus.
mickaelpfr Messages postés 197 Date d'inscription mardi 18 février 2003 Statut Membre Dernière intervention 29 avril 2009 2
16 nov. 2008 à 05:09
ça troll ça troll !
allez allez compatissons, l'idée était la , l'intention aussi pauvre bougre apprendra de ses erreurs :)

bon courage pour la suite ^^

ps : oui il est bien 5h00 du mat quand j'ai posté ce commentaire :p
cyrphp Messages postés 18 Date d'inscription dimanche 17 octobre 2004 Statut Membre Dernière intervention 13 avril 2009
16 nov. 2008 à 00:07
NON car le zip est corrompue , Ce sont de toute façon les premieres lignes et premiers commentaires qui m'ont fait réagir comme je l'ai dit précedemment .

La class pseudo hover est implémenté dans IE 7 , ni plus , ni moins et :
////
<!-- Texte afficher dans la boîte -->

////
Bin ça me fait bondir , c'est pas que je te juge , c'est que c'est dans les source a télécharger et qu'un débutant pourrait estimer ce code comme une réference ultra top , non , c'est pas bon !
Corrige et propose au moins un code valide :
////

<!-- Texte afficher dans la boîte -->

////

D'un autre cote tu dis :
"Javascript / Ajax / DHTML" et DHTML inclut le CSS .

Non , "Javascript / Ajax / DHTML" c'est du javascript , un script de programme interprété par le navigateur , css n'est pas un langage de programmation .

La mise en forme n'a rien de dynamique (sauf si tu croit que la pseudo class :hover l'est).

Et , Il y a confusion , dhtml pour dynamic html , veut dire html + attribut onclick , etc ... qui embarque donc le javascript jusque dans les attributs des balise . C'est carrement a l'opposé des bonnes pratiques CSS , qui veut justement que les align= truc ou machin soit placé , au pire dans l'attribut style , mieux dans la balise style de l'entête de la page et l'idéal dans un fichier css externe .... ce qui vaut aujourd'hui aussi pour les javascript a externalisé ou placé dans l'entête de la page ... Histoire de ne pas passer des semaines a remettre un site a jour

Oui CSS est bien une bête a part (entiere) .

..Sinon je laisse tombé la discussion ici car je n'est pas l'âme d'un prof et je ne cherche a convertir personne et surtout j'ai une semaine trés chargée .

Cordialement ++ (je ne serai pas sans te lire :) )
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 7
15 nov. 2008 à 02:16
cyrphp -> As-tu au moins pris la peine de lire les notes de la source qui marque clairement que j'ai ajouté une version supportant IE 7 ?

La version compatibilité n'a pas été aussi simple que les autres exemples, car j'ai voulu gardé la possibilité d'avoir un espacement entre les éléments, ce qui peut poser problème dans plusieurs navigateurs (pas juste Internet Explorer), notamment parce que le navigateur peut considérer que l'on est plus au-dessus d'un élément juste à cause que l'on se trouve dans la marge de celui-ci.

Une nouvelle section pour le CSS serait tant qu'à moi inutile puisque l'on fait vite le tour des possibilité de script. En passant, la description du site est "Javascript / Ajax / DHTML" et DHTML inclut le CSS.
cyrphp Messages postés 18 Date d'inscription dimanche 17 octobre 2004 Statut Membre Dernière intervention 13 avril 2009
14 nov. 2008 à 11:38
:) , bonjour

Pour l'exemple que j'ai laissé , il est rapidement fait et juste là pour démontré l'implémentation de :hover dans IE7 (sur li ) avec 2 version de base horizontal et vertical, pour le clear , en fait il suffit de positionner le second ul en float et non pas ses li , cela permet par exemple d'intercalé le contenu entre ces 2 menus .
(ex:
<li>float left</li>

contenu page en float-right

<li>sans float</li>

@LAKICHEMOLE , lol , précisons quand même que ce n'est pas a prendre en référence et fastidieux , ;) .

Aucune idée si "Code source" proposera peut-etre un jour une section style , ce n'est pas un langage de programmation , mais il est vrai qu'il y beaucoup de questions qui demandent réponses sur le comment du pourquoi avec tout ces Navigateurs qui n'en font qu'a leur tête ....

Cdt , Cyrphp
gauvain49 Messages postés 6 Date d'inscription lundi 23 octobre 2006 Statut Membre Dernière intervention 13 novembre 2008
13 nov. 2008 à 12:51
Il peut y avoir tellement d'exemple avec de petites variantes pour faire un menu déroulant en CSS, comme celui que j'ai indiqué plus haut, en reprenant les bases d'Arto_8000, en un peu plus valide :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu CSS par Moi</title>
<style type="text/css" media="all">
/*------------------------------------------------------------------------ Mis en forme du Menu*/
body, ul, li { /* On retire les marges pour unifier le tout */
margin: 0;
padding: 0;
}
ul {
list-style-type: none; /* On enlève les puces des listes */
}
ul#menu li {
position: relative; /*On défini la balise servant à positionner le reste des menus */
padding: 5px;
color: #fff;
background-color: #33e;
width: 150px;
border: 1px solid #000;
}

/*-------------------------------------- Positionnement des menus, avant de les faire disparaître */

ul#menu li ul.menu, ul.menu ul.content {
position: absolute;
top: -1px; /* On repositionne en supprimant le pixel ajouter par la bordure */
left: 161px;/* Pareil ! On repositionne en prenant les 150px de longueur, les 10px de padding droite + gauche, le px de bordure */
display: none; /* Là, on les fait disparaître */
}

/*--------------------------- Au passage de la souris sur les liens voulus : PAF ! Ca réapparaît */

ul#menu li.ligne:hover ul.menu, ul.menu li.sousligne:hover ul.content {
display: block;
}
</style>
</head>

<li class="ligne">Menu 1

<li class="sousligne">Menu 1.1

<li>Menu 1.1.2</li>

</li>
<li class="sousligne">Menu 1.2

<li>Menu 1.2.1</li>

</li>

</li>
<li class="ligne">Menu 2

<li class="sousligne">Menu 2.1

<li>Menu 2.1.1</li>

</li>
<li class="sousligne">Menu 2.2

<li>Menu 2.2.1</li>

</li>

</li>
<li class="ligne">Menu 3

<li class="sousligne1">Menu 3.1</li>

</li>

</html>

Celui ci reprend le principe de menu avec sous-menu et sous-sous-menu. J'avoue ne pas avoir fait de test pour IE6, et ne pense pas qu'il soit compatible avec (quelque chose d'un peu complexe en CSS est compatible avec IE6 sans javascript ??!)

CYRPHP, ton code est pas mal, mais juste une petite critique :
pour #verticale à la première ligne tu as précisé ==> "float:left" puis "clear:left;". Je pense qu'un simple "clear:both;" peut remplacer ces deux lignes.

ARTO_8000 a lancé un bon débat en postant ce code. Dommage qu'il n'y ai pas une place réservée au CSS dans code source, ça pourrait être pas mal !
lakichemole Messages postés 253 Date d'inscription vendredi 13 juin 2003 Statut Membre Dernière intervention 18 mai 2009
13 nov. 2008 à 10:07
Je suis assez fan de ton menu full css avec IE6 via des balises map CYRPHP :)
cyrphp Messages postés 18 Date d'inscription dimanche 17 octobre 2004 Statut Membre Dernière intervention 13 avril 2009
12 nov. 2008 à 20:58
Bonjour a tous ,

Je suis un rookie en js , mais je maitrise pas trop mal les CSS , et j'inclu IE6 .

Tout d'abord , IE7 implemente la pseudo class :hover a l'instar de Firefox . Donc si l'on vise pas en dessous de IE7 pour faire des bulles ou des menus déroulant ou autre effet de survol sur une quelconque balise , Le javascript est devenu totalement inutile ! exemple de base en horizontal et vertical :(page complete a copier/coller :
<<<<<<<
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>menu déroulant</title>
<style type='text/css'>
#vertical {width:100px;float:left;clear:left;margin:0;border:1px solid;}
ul {margin-left:100px;list-style-type:none;padding:0;}
ul li {float:left;margin:0 ;position:relative;padding:0 1em}
li li , #vertical li {float:none;}
li ul {display:none;position:absolute;padding:0;margin:0;background:yellow;}
li:hover ul {display:block;left:0;width:300px;top:1.2em;}
li li:hover {color:red;}
#vertical li ul {left:99px;top:0;background:green;}
</style>
</head>

<li>[# lien]

<li>lien ou n'importe quoi d'autre</li>
<li>lien ou n'importe quoi d'autre</li>

</li>
<li>[# lien]

<li>lien ou n'importe quoi d'autre</li>
<li>lien ou n'importe quoi d'autre</li>

</li>
<li>[# lien]

<li>lien ou n'importe quoi d'autre</li>
<li>lien ou n'importe quoi d'autre</li>

</li>
<li>[# lien]

<li>lien ou n'importe quoi d'autre</li>
<li>lien ou n'importe quoi d'autre</li>

</li>
<li>[# lien]

<li>lien ou n'importe quoi d'autre</li>
<li>lien ou n'importe quoi d'autre</li>

</li>

<li>[# lien]

<li>lien ou n'importe quoi d'autre</li>
<li>lien ou n'importe quoi d'autre</li>

</li>
<li>[# lien]

<li>lien ou n'importe quoi d'autre</li>
<li>lien ou n'importe quoi d'autre</li>

</li>
<li>[# lien]

<li>lien ou n'importe quoi d'autre</li>
<li>lien ou n'importe quoi d'autre</li>

</li>
<li>[# lien]

<li>lien ou n'importe quoi d'autre</li>
<li>lien ou n'importe quoi d'autre</li>

</li>
<li>[# lien]

<li>lien ou n'importe quoi d'autre</li>
<li>lien ou n'importe quoi d'autre</li>

</li>

</html>
>>>>>>>>>>>

Quand au defit de faire un menu deroulant pour IE6 sans javascript et valide W3C : voici un exemple : http://gcyrillus.free.fr/decoupe-fr/flyman/
Cette exemple ne se base pas sur la technique d'un tableau inserer en commentaires conditionnels qui doit bien avoir 8 ou 10 ans d'existence déja.

Et pour contribuer a code source section JS , je peut aussi proposé ceci
http://gcyrillus.free.fr/essai/menu_deroulant.html JS pour IE6 .

C'est la premiere fois que je vais noté une source , et c'est pas fort :)
Pourquoi ?
La moindre des choses est de proposer un structure html VALIDE :p : On n'englobe pas un avec un ... si tu veut te servir d'une balise neutre tu as le
comme element block ..
et sont neutre et ne decrive rien y'en a un de type block et l'autre de type inline , justement pour produire un code valide.

Ensuite tu parles de display:inline-block; ... attention ou tu mets les pieds :) , IE 7 et inf ne l'implémente pas en mode de rendue standard sur des element de type block par defaut (p) , FF2 et inf non plus !

Ton intention est louable a la base , mais franchement risque de faire du mal a ceux qui la prendrait comme référence , et ça c'est pas cool .

Cordialement GC ,

P.S. Et puis on passe sa vie a apprendre et se tromper , alors ne le prends pas mal , tu as prouvé que le sujet t'interesse et tu n'en restera surement pas la , je me vautre aussi en beauté de temps a autre ...

Désolé si je repete certains propos , mais je n'ai pas eu le courage de tout lire , les premieres etaient trop éloquantes ...

Bonne continuations
@karamel Messages postés 1859 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 17 juillet 2024 153
4 nov. 2008 à 23:22
repris sur le site de mozilla

https://developer.mozilla.org/fr/Probl%C3%A8mes_soulev%C3%A9s_par_le_pseudo_%C3%A9l%C3%A9ment_hover

Beaucoup d'auteurs utilisent la pseudo-classe CSS2 :hover pour appliquer un style à leurs liens. Cette innovation, introduite en premier par Microsoft® Internet Explorer et adoptée dans les spécifications CSS, est très populaire pour styler des liens texte, en remplacement des « rollovers » faits en JavaScript. Toutefois, le support avancé de CSS dans les navigateurs a entraîné des comportements agressifs inattendus sur certaines pages.
cs_thedesigner37 Messages postés 3 Date d'inscription mercredi 9 juillet 2008 Statut Membre Dernière intervention 4 novembre 2008
4 nov. 2008 à 21:32
A ouais, non dsl je ne l'avais pas vu, super, merci, mais sa m'as quand même appris des trucs, encore merci.
mickaelpfr Messages postés 197 Date d'inscription mardi 18 février 2003 Statut Membre Dernière intervention 29 avril 2009 2
4 nov. 2008 à 19:48
est ce qu'une seule personne a été voir le lien donné plus haut ???

http://www.cssplay.co.uk/menus/final_drop.html
cs_thedesigner37 Messages postés 3 Date d'inscription mercredi 9 juillet 2008 Statut Membre Dernière intervention 4 novembre 2008
4 nov. 2008 à 19:08
Bon OK c'est pas ça qui t'en empêcheras, mais a ce que je sache, toutes les personnes qui utilise internet ne savent pas forcement comment faire, a moins que toutes ces personnes ont des connaissances approfondi en ce qui concerne le code source. Même moi, c'est un développeur de site qui m'as dis que je pouvais récupérer des codes et les modifier, sur tout les site que je voulais en récupérant le code source.
Et sa faisait 2 semaines que j'avais commencer, et avant ça, j'ai utiliser internet presque tout les jours depuis 6 ans, donc c'est pas complètement inutile, sa dissuade et empêche ceux qui ne savent pas le faire c'est tout.

Autrement super code,merci beaucoup. Je l'ai modifié pour en faire un menu horizontal, le premier sous menu va dessous et le deuxième a droite.

http://silerebook.indre-et-loire.info/index.html la y a ce que rend le code de arto_8000.
http://silerebook.indre-et-loire.info/menu%20css%20mode%20concept/index.html
et la c'est ce que rend ce que j'ai modifié.
LeFauve42 Messages postés 239 Date d'inscription vendredi 20 octobre 2006 Statut Membre Dernière intervention 20 avril 2009
4 nov. 2008 à 15:36
>(même si le javascript est très utile pour bloquer le clic droit de la souris )

Bon, ca n'a pas vraiment de rapport avec ce source, mais je profite de l'occasion pour raler un coup contre tous ces scripts foireux qui essaient pour d'obscures raisons de bloquer le bouton droit de la souris !

Je dirais deux choses a leur propos, qui je l'espere vous dissuaderont de les utiliser :
- Personnelement, quand je suis sur un site qui bloque le bouton droit de la souris, j'en change ASAP !
- Si vraiment j'ai envie de regarder les sources ou copier une image, une animation flash ou n'importe quel composant de la page, ce n'est pas ca qui va m'en empecher.

Voila, c'etait juste un petit coup de geule qui n'a rien a voir avec le topic, et je m'en excuse de nouveau :o)

Pour dire un petit quelque chose dans le sujet, je trouve ce source tres elegant, et meme si helas on passe beaucoup de temps en developpement Web a gerer la compatibilite inter-navigateurs(*), c'est ce genre de sources qui petit a petit force les developpeurs de navigateurs a implementer la norme.

(*) Souvent a cause de IE d'ailleurs (c'est un fait, meme si ca s'ameliore beaucoup dans les versions recentes)
cs_thedesigner37 Messages postés 3 Date d'inscription mercredi 9 juillet 2008 Statut Membre Dernière intervention 4 novembre 2008
4 nov. 2008 à 02:11
Slt, et bien moi je trouve ça super, je suis débutant et j'essaye de développer un site entièrement en html et css (même si le javascript est très utile pour bloquer le clic droit de la souris )et j'attendais ce code depuis un petit moment, alors je dis continu comme ça !!
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 7
3 nov. 2008 à 18:23
mickaelpfr -> Ce n'est pas compatible que sur Firefox comme tu le dis. C'est fonctionnelle sur Firefox, Opéra et IE 7 ce qui représente quand même une bonne majorité des utilisateurs d'Internet.

Mamoune2005 -> La balise p c'est tout simplement par soucis de standard. Normalement le texte doit être entre des balises qui sont fait pour avoir du texte à l'intérieur.

Pour le sujet, ma version n'est peut-être pas la meilleur, mais je trouves que le sujet vallait le coup d'être parler, puisque le CSS va surement prendre de plus en plus de place dans le futur.
XtremDuke Messages postés 626 Date d'inscription samedi 28 septembre 2002 Statut Membre Dernière intervention 18 mai 2009 4
3 nov. 2008 à 14:10
Personnellement, GAUVAIN49 reflète parfaitement ma façon de penser donc je ne vais pas m'éterniser sur le sujet.
Je tiens juste à montrer mon mécontentement face à une source qui pourrais être à lui seul un tuto pour les personnes ne connaissant pas CSS mais qui est présenté de façon très maladroite. Deux versions pour en fin de compte, faire la même chose et qui ne fonctionne pas en plus...

Dommage
Mamoune2005 Messages postés 9 Date d'inscription dimanche 27 mars 2005 Statut Membre Dernière intervention 3 novembre 2008
3 nov. 2008 à 13:12
bonne note quand même
Mamoune2005 Messages postés 9 Date d'inscription dimanche 27 mars 2005 Statut Membre Dernière intervention 3 novembre 2008
3 nov. 2008 à 13:10
je n'ai pas lu tous les commentaires, mais faire un menu avec des balises P c'est au départ une mauvaise solution !

Un menu est une liste d'action/choix/possibilité !

Sinon Microsoft ne fait plus 2/3 du marché sauf pour des sites très "people".
Il ne doit pas imposer sa norme mais respecter la norme de la communauté qui est nettement plus juste !
gauvain49 Messages postés 6 Date d'inscription lundi 23 octobre 2006 Statut Membre Dernière intervention 13 novembre 2008
3 nov. 2008 à 12:35
Il est vrai que la compatibilité entre navigateurs est un problème, et que Microsoft ne nous aide pas beaucoup, surtout dans sa version 6 (encore 22,3% d'utilisateurs au mois de septembre 2008 selon le w3schools). La version 7 arrange beaucoup de chose, mais ce n'est pas encore ça. J'attends la 8 avec impatience (et espoir !), même si je sais que cela n'apportera pas pour autant une disparition rapide de IE6.

J'ai proposé ma propre version de ce code CSS (indiqué plus haut). Malgré tout, en tant que pro et très attaché à créer des sites conformes au plus haut point sur tous les navigateurs (de IE à FF, en passant par Opera, Safari, Chrome, parfois même sur Flock ou SpaceTime quand j'ai pris des vitamines le matin), je n'utiliserai pas ce code sur mes sites, à cause de son manque de compatibilité (encore trop dangereux avec IE. Sic!).

Malgré tout, je trouve que ce code CSS se devait d'être montré. Si on passe outre Microsoft, il permet de voir la puissance de ce langage, qui peut amplement remplacer Javascript dans plusieurs domaines (pas trop quand même), et de manière bien plus simple (que ce soit pour des menus dynamiques ou des effets de rollover). Bien sûr, on ne peut pas faire autant de chose qu'avec php ou autre, mais moi, je le trouve... amusant ! (non, je n'ai pas sniffé une ligne de coke avant d'écrire ce post).

Avant, les standards du web, je m'en fichais pas mal, du moment qu'un site s'affichait correctement. Mais en découvrant CSS, sa mise en place à la fois simple, puissance, et rapide, maintenant je ne peux plus m'en passer. Et je m'amuse bien plus à créer un site en séparant bien le fond de la forme (grâce à ça, je peux même en faire la maintenance avec une main dans le dos et deux doigts cassés).

J'avoue aussi avoir pris le parti de ne plus trop me laisser freiner par IE6 dans la conception de mes sites. Je sais, c'est affreux et immoral pour quelqu'un qui se dit professionnel et respectueux des conformités, mais c'est la seule façon que j'ai trouvé pour encourager les gens à faire une mise à jour vers un navigateurs mieux respectueux des standards (au moins de passer de IE6 à IE7). J'avoue que c'est dangereux, voir risqué, mais voilà, c'est parfois en secouant un peu les choses qu'on les fait évoluer (peut être qu'avec cette méthode j'apporterai même la paix dans le monde, mais là je suis moins convaincu). Mais bien sûr, j'explique bien aux personnes "pourquoi" c'est nécessaire, je ne leur dit pas juste "faites-le, ayez confiance" (Aaaaah ! Si c'était si simple !).

Bref, ce code a été montré de façon pertinente, en montrant sur quoi il marche et ne marche pas. Maintenant, aux gens de faire leur choix. Et même si certain pense qu'il est trop tôt pour le mettre en action (dû au problème de compatibilité de certains navigateurs avec le rendu CSS, je me répète non ?), et bien, disons que ARTO_8000 l'a juste présenté avec un peu d'avance sur son temps... !

Promis, la prochaine fois, je fais moins long...
mickaelpfr Messages postés 197 Date d'inscription mardi 18 février 2003 Statut Membre Dernière intervention 29 avril 2009 2
3 nov. 2008 à 12:18
ça commence a troller ....
arto , change l'intitulé de ta source car tu va finir par te faire descendre en flèche pour le moment les propos restes courtois mais si un wc3 addict passe par ici tu es mal ^^

bon et va matter le lien que je t'ai donné un peu plus haut dans mes commentaires ^^
cs_bluedemon Messages postés 41 Date d'inscription mercredi 21 septembre 2005 Statut Membre Dernière intervention 3 novembre 2008
3 nov. 2008 à 11:32
lakichemole "Malheureusement c'est plutôt microsoft qui fait la norme :/ A nous de nou adapter :/"

Non pas entièrement , ce qu'il s'est passé est que IE 6 est sortie avant la sortie de la norme W3C CSS. Ce qu'il fait qu'il y a énormément de bug CSS. De plus, à l'époque du début du web, la guerre entre IE et netscape,les premiers browsers, empêchait la standardisation. Ils ne cherchaient qu'à apporter des nouvelles fonctionnalités propriétaires afin de devenir LE navigateur exclusif. Depuis, microsoft a fini par accepter que la standardisation est primordiale. IE8 Passe des testes de certification des normes CSS voir aussi le fameux test Acid2.
L'avantage avec firefox c'est que les mises à jours et correctifs sont disponible assez souvent, l'inverse de microsoft et firefox à l'avantage de regrouper une grosse communauté.
lakichemole Messages postés 253 Date d'inscription vendredi 13 juin 2003 Statut Membre Dernière intervention 18 mai 2009
3 nov. 2008 à 10:25
Malheureusement c'est plutot microsoft qui fait la norme :/ A nous de nou adapter :/
cs_Cil20 Messages postés 43 Date d'inscription vendredi 20 décembre 2002 Statut Membre Dernière intervention 3 novembre 2008
3 nov. 2008 à 10:17
Moi c'est un 10 assuré, parceque le javascript c'est ma bête noire. Alors toute solution permettant de s'en passer ne peut-être que bonne.

Merci Arto.

Juste une petite conclusion. régulièrement je vois dans les commentaires du site sur la "propreté du code" : en gros respect de la norme W3c et j'en passe. Mais je trouve dommage que finalement un petit fabricant de logiciel comme Microsoft ne soit pas capable de faire une application qui puisse exploitée pleinement ces normes. Mais je suis peut-être à coté de la plaque !
lakichemole Messages postés 253 Date d'inscription vendredi 13 juin 2003 Statut Membre Dernière intervention 18 mai 2009
3 nov. 2008 à 10:16
Oui quand j'ai vu l'annonce je me suis dis si il dis "Et oui vous n'avez pas rêvé, un menu entièrement dynamique fait avec seulement du css sans la moindre ligne de javascript" je l'ai pris pour le jésus du web, puis après le premier test (IE6) je me suis dis "bon ba comme dab rien de nouveau".
Tout ça pour dire que cette source est jolie un bon concept, de l'art dirons certains mais ça s'arrete làa. Travaillant aussi la dedant (le web) ma boite n'utilise que IE6 (sur des milliers de poste) et c'est souvent comme ça dans les grosse boite tout les logiciels utilisés sont imposé. Donc ta source serais utile pour les boites qui imposerait FF (j'en connais pas beaucoup) .
Mais je met la moitié pour le principe, mais ne fait pas trop "réver" les gens dans tes annonce car plus haut tu les fait réver plus dure et la chute (et les critique)
cs_bluedemon Messages postés 41 Date d'inscription mercredi 21 septembre 2005 Statut Membre Dernière intervention 3 novembre 2008
3 nov. 2008 à 09:31
Désolé pour la note, problème de souris. à corrigé svp (5 pour l'intérêt des CSS). Mais sache que ie6 est encore énormément utilisé, et peu importe à updater ou non, les internautes ont leur habitudes et souvent le changement ils ne le souhaitent pas et restent sur des vieilles versions (vérifié lors de stats avec direct stat).
mickaelpfr Messages postés 197 Date d'inscription mardi 18 février 2003 Statut Membre Dernière intervention 29 avril 2009 2
3 nov. 2008 à 09:25
Allez on va mettre tout le monde daccord :

http://www.cssplay.co.uk/menus/final_drop.html

mes propos étaient fondé , développeur web depuis plusieurs années j'ai été confronté de nombreuse fois à ce genre de problèmes !
Donc soit tu proposes une source propre et correcte crossbrowser qui pourrait effectivement apporter une réelle alternative au javascript , soit tu t'abstiens de poster une source qui n'est "fonctionnelle" que sous firefox :)

Cordialement ;)
cs_bluedemon Messages postés 41 Date d'inscription mercredi 21 septembre 2005 Statut Membre Dernière intervention 3 novembre 2008
3 nov. 2008 à 09:22
En tant que webmaster, la compatibilité avec les autres navigateurs est très importante. Un menu qui n'est pas compatible sur tous les navigateurs ne sert à rien. Désolé, peut être déformation professionnel, mais c'est la base à savoir.
commandodk Messages postés 1 Date d'inscription vendredi 15 décembre 2000 Statut Membre Dernière intervention 3 novembre 2008
3 nov. 2008 à 08:25
je debute sur la creation de site et franchement pour moi c'est une avancée significative
quelques petits bugs a regler mais pour moi c'est super
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 7
2 nov. 2008 à 23:52
Bon, je viens de sortir une nouvelle version que j'ai appelé "mode compatibilité" pour ceux qui veulent avoir une version compatible avec IE 7. La version est pas super propre côté code (dans le sens où j'ai utilisé des hacks & tweaks un peu bizaroïde par moment pour que ça fonctionne), c'est pour cela que j'ai laissé l'ancienne que j'ai baptisé "mode concept".
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 7
2 nov. 2008 à 21:14
mickaelpfr -> Au contraire, c'est très pertinent pour le site. D'autant plus que l'alternatif est beaucoup plus simple qu'en javascript. Pour IE j'en doute très fortement, puisque ce n'est qu'à partir de la version 7 que l'attribut hover a commencé à être supporté sur d'autre balise que "a". Je rajouterai que de plus en plus d'utilisateur préfère avoir les javascript désactivé sur les sites. Si on peut offrir un site qui n'a besoin d'aucun javascript, on peut ainsi offrir la possibilité au utilisateur de limité leurs risques en visitant la page. Mais bon tout cela est un autre débat.

gauvain49 -> Je dois m'avouer un peu surpris. J'avais déjà fais des tests avec sur d'autre truc avec la propriété hover sur de ul et j'avais été incapable de le faire fonctionner sur IE 7. La seule différence que j'ai noté avec les trucs sur lequels je travaillais est que tu fais le hover sur un li au lieu du ul. Probablement que IE 7 ne supporte pas le hover sur les ul, mais le supporte sur les li. Bon dès fois faut pas trop poser de question sur le fonctionnement de IE. Je vais modifier cela un peu et je te donne le crédit.
mickaelpfr Messages postés 197 Date d'inscription mardi 18 février 2003 Statut Membre Dernière intervention 29 avril 2009 2
2 nov. 2008 à 20:56
je me permet de faire un commentaire critique sisi :)
- code totalement inutile sur un site javascript :) ( ha moins que je ne me sois trompé d'url mais je suis bien sur javascriptfr.com ?? )
- de plus ce code qui nous fais rêver comme le dirait son auteur est : lourd , non crossbrowser et donc impossible a utiliser sur un site dit "professionnel" !

l'auteur aurait du se renseigner sur les menus full css compatible depuis ie6 jusqu'a FF3 et plus et si il en existe énormément !

sur ce en attendant un joli menu en javascript avec des effets qui font crack boum hueeee je me permet de mettre 1 a cette source car le 0 n'étant pas possible !

bien amicalement :)
gauvain49 Messages postés 6 Date d'inscription lundi 23 octobre 2006 Statut Membre Dernière intervention 13 novembre 2008
2 nov. 2008 à 19:29
Tiens... !
Finalement, je retire ce que j'ai dit. Il y a une méthode alternative à ce code pour IE7 (à mon avis si on a la dernière mise à jour de ce navigateur)

La preuve ici : http://www.percevalcreation.fr/test.html

ARTO_8000, il est encore temps que moi je relève ton défi ? Non ! Ah bon... tant pis...

:-)
gauvain49 Messages postés 6 Date d'inscription lundi 23 octobre 2006 Statut Membre Dernière intervention 13 novembre 2008
2 nov. 2008 à 17:15
ARTO_8000 a raison, IE7 et antérieur ne supportant que l'attribut :hover sur la balise a, il n'y a aucune méthode alternative pour la navigateur de Microsoft (en attendant la version 8). Sauf en rajoutant du javascript, mais là, nous ne sommes plus dans le tout CSS.
La seule chose qui peut être améliorée, c'est d'utiliser les balises "ul" et "li" pour le menu plutôt que "div" et "span". Mais ça ne changerai pas beaucoup le principe du code CSS décrit ici, alors que c'est lui qui nous intéresse le plus.

D'ailleurs, je me demande si on ne peut pas faire le même menu dynamique avec la propriété "clip" ? Va falloir que je me penche sur la question...
mehdi7604 Messages postés 118 Date d'inscription jeudi 11 mai 2006 Statut Membre Dernière intervention 6 mars 2015
2 nov. 2008 à 17:05
ça marche sur opera version 9 sous linux
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 7
2 nov. 2008 à 16:54
C'est sur qu'à première vue on peut tout de suite dire que je n'ai fais aucune recherche pour rendre mon code compatible. Dès fois, il faut se rendre à l'évidence que c'est impossible. En passant, j'ai rajouté une note dans la conclusion pour expliquer pourquoi c'est impossible avec la version 7 et -.
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
2 nov. 2008 à 16:21
qu'es-je avancé ? j'ai dit que tu avais participé a des débat avec bultez comme quoi tu n'aimais pas IE et alors, chacun pense ce qu'il veut.

Je n'est pas dit que c'était possible de le rendre compatible IE, j'ai dit que pour moi tu n'avais pas essayé.

Ce n'est pas mon code donc pas a moi de chercher des alternatives pour IE( sois dit en passant, si j'en connaissait je te les aurait dit).

a++
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 7
2 nov. 2008 à 16:17
"c'était prévisible, nous connaissons Arto_8000 car il faisait parti de plusieurs débat qui disait qu'internet explorer était de la merde et que firefox était le meilleur navigateur donc très prévisible qu'il ne cherche pas a rendre le code compatible a un navigateur qui pour lui est une merde ! "

Alors tu refuse de prouver ce que tu avances ?
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
2 nov. 2008 à 16:13
Défi refusé, je n'est ni le temps, ni l'envie d'essayer de faire ça pour prouvé quelque chose qui n'a pas de sens, c'est comme si je te demandais de sauter du haut d'un pont pour prouver que t'étais un mec.

a++
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 7
2 nov. 2008 à 16:08
Nicomilville -> En passant, ce sur quoi repose tout le code est la propriété "hover" qui n'est supporté seulement sur la balise "a" et pas dans tous les cas sur la version courrante et précédente de IE. Je te lance au défi de faire la même chose, mais qui fonctionne sous IE 7 avec la même méthode.
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
2 nov. 2008 à 16:02
oui arto... j'ai effectivement lu la description mais la V8 d'internet explorer n'est qu'une beta et la vrai v8 sera peut être très différente donc...

a++
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 7
2 nov. 2008 à 15:47
Nicomilville & Lanner -> Vous avez lu la description que j'ai pris le temps de marqué ou non ? Ça dit clairement que c'est compatible avec Internet Explorer 8 Bêta 2+. (Le "+" veux dire à partir de cette version) Et Lancer la version 2.0 de Firefox n'est plus la version courrante, alors pense à l'updater.

Aussi, j'ai posté ceci davantage pour le concept. Avec la version 8 d'Internet Explorer qui va supporter pleinement ces fonctionnalité, il est déjà temps de penser à tous ce que l'on peut faire avec.

Note: Ce n'est pas être anti-IE que de faire état que IE a du retard au niveau du CSS. C'est un fait et non une opinion.
mehdi7604 Messages postés 118 Date d'inscription jeudi 11 mai 2006 Statut Membre Dernière intervention 6 mars 2015
2 nov. 2008 à 14:04
Meme si ça beug ,, l'idée est géniale ,, au lieu de faire du JS, ne faire que des balises encapsulées du genre <Menu><Sous Menu1></Sous Menu1><Sous Menu2></Sous Menu2></Menu>
gauvain49 Messages postés 6 Date d'inscription lundi 23 octobre 2006 Statut Membre Dernière intervention 13 novembre 2008
2 nov. 2008 à 12:16
Bonjour,

C'est vrai qu'IE a du mal avec le CSS mais, comme dit Zugolin, tant qu'il restera aussi répandu comme navigateur, ce code n'est pas très exploitable.

Toutefois, ça fait du bien de voir que quelqu'un utilise le CSS pour faire une mise en forme un peu plus "dynamique" qu'une banale image d'arrière plan ou qu'un texte en couleur. Ca permet de voir la puissance des feuilles de style quand elles sont bien maîtrisées. Donc, Bravo !!
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
2 nov. 2008 à 11:26
oui, mais ce serai bien qu'un jour les navigateurs est moins de différence car c'est usant a force de devoir tout rendre compatible, moi je suis en train de faire une API pour tout rendre compatible sans effort...

a++
zugolin Messages postés 14 Date d'inscription dimanche 24 juin 2007 Statut Membre Dernière intervention 2 mars 2009
2 nov. 2008 à 11:18
Hello!
... et tant que ie fera les 2 tiers des navigateurs ... vaut mieux faire avec !
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
2 nov. 2008 à 11:14
Salut,

@lanner : c'était prévisible, nous connaissons Arto_8000 car il faisait parti de plusieurs débat qui disait qu'internet explorer était de la merde et que firefox était le meilleur navigateur donc très prévisible qu'il ne cherche pas a rendre le code compatible a un navigateur qui pour lui est une merde !

a++

PS : no comment
cs_lanner Messages postés 131 Date d'inscription samedi 16 avril 2005 Statut Membre Dernière intervention 8 avril 2015
2 nov. 2008 à 11:06
Salut, bug complètement sous IE7 , ne fonctionne que sous FF
Rejoignez-nous