menu déroulant que en css

menu déroulant que en css - HTML/CSS - Programmation

Marsh Posté le 02-09-2005 à 19:10:57    

hello, je veux faire un menu déroulant que en CSS alors voila comment je m'en suis pris :
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3. <html>
  4. <head>
  5. <title>Untitled</title>
  7. <style type="text/css">
  8. <!--
  10. ul li {
  11. list-style-type: none;
  12. margin: 0;
  13.       }
  15. #menu li a {
  16. height: 1em;
  17. background: gray;
  18. margin: 5px;
  19. width: 10%;
  20. padding: 5px;
  21.            }
  23. #menu dt a{
  24. display: none;
  25.             }
  27. #menu li a:hover {
  28. text-decoration: none;
  29. background-color: red;
  30. color: blue;
  31.                  }
  33. #menu li a:hover dt a{
  34. display: block;
  35. position: absolute;
  36. top: 0px;
  37. left: 11px;
  38. height: 4em;
  39. width: 10%;
  40. background: red;
  41.                     }
  44. -->
  45. </style>
  47. </head>
  48. <body>
  50. <ul id="menu">
  51.    <li><a href="#">item 1</a><dl><dt><a href="#">item 1.1</a></dt></dl></li>
  52.  <li><a href="#">item 2</a><dl><dt><a href="#">item 1.2</a></dt></dl></li>
  53.  <li><a href="#">item 3</a><dl><dt><a href="#">item 1.3</a></dt></dl></li>
  54.  <li><a href="#">item 4</a><dl><dt><a href="#">item 1.4</a></dt></dl></li>
  55. </ul>
  58. </body>
  59. </html>


 
mais le probleme c'est que le menu qui doit s'afficher en passant sur le 1er menu hors, il ne s'afiche pas ????
 
ou est mon probleme
 
(je fais exprès de pas mettre du javascript car je ne sais pas m'en servir)

Reply

Marsh Posté le 02-09-2005 à 19:10:57   

Reply

Marsh Posté le 02-09-2005 à 19:22:15    

le comportement que tu décris est tout à fait normal.
 
Sinon, il n'y a actuellement aucune solution cross-browsers pour faire un menu déroulant uniquement en CS. (enfin il me semble). Va voir sur alsacreations, ils ont une panoplie de menu comme le tien en exemples, tu pourra t'en inspirer.

Reply

Marsh Posté le 02-09-2005 à 19:23:57    

Pas de JS <=> ne fonctionnera que sous les navigateurs respectant les standards, donc pas sur IE.
 
Concernant ton cas, c'est quoi ca :
 

Code :
  1. #   <li><a href="#">item 1</a><dl><dt><a href="#">item 1.1</a></dt></dl></li>
  2. #      <li><a href="#">item 2</a><dl><dt><a href="#">item 1.2</a></dt></dl></li>
  3. #      <li><a href="#">item 3</a><dl><dt><a href="#">item 1.3</a></dt></dl></li>
  4. #      <li><a href="#">item 4</a><dl><dt><a href="#">item 1.4</a></dt></dl></li>


 
Les dl et dt seraient à remplacer par une sous liste avec donc à nouveau un <ul></ul> qui contiendrait une série de <li></li>


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 02-09-2005 à 20:33:42    

http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
 

Citation :

Pourquoi utiliser du javascript ?
 
Un menu déroulant peut très bien se réaliser intégralement en CSS, sans utilisation de langages de scripts, alors pourquoi allons-nous utiliser javascript dans ce didactitiel?  
Il y'a deux raisons à cela. La première est que la fonction originelle des feuilles de styles CSS est de s'occuper de la mise en page et non des aspects dynamiques de celle-ci. Ces derniers sont du domaine de Javascript (ou ECMAScript). Il s'avère que la pseudo-classe (:hover) est un peu située entre les deux : elle indique le comportement au survol mais pourrait très bien servir à des applications plus dynamiques.


 
vous avez vu que l'on peut faire ceci sans jvscript  [:itm]  [:itm]  
 

Reply

Marsh Posté le 02-09-2005 à 22:27:54    

ce qu'est marrant, c'est que chez alsacreation, dés qu'on désactive javascript, les exemple soit disant sans javascript ne marche plus sous firefox et j'ai pas osé testé avec IE.

Message cité 1 fois
Message édité par omega2 le 02-09-2005 à 22:29:35
Reply

Marsh Posté le 02-09-2005 à 23:34:44    

J'ai réussit un menu qui fonction que avec du css. PAr contre, ca marche pas sous IE. Pour IE, il faudrait une version avec javascript. :(
 
fichier html :

Code :
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  2. <head>
  3. <title></title>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  5. <link rel="stylesheet" type="text/css" href="css.css" />
  6. </head>
  7. <body>
  8. <ul class="niveau1">
  9.   <li class="niveau1"><div><a href="#">menu1</a>
  10.    <ul>
  11. <li><a href="#">ligne1_1</a>
  12. </li>
  13. <li><a href="#">ligne1_2</a>
  14. </li>
  15.    </ul></div>
  16.   </li>
  17.   <li class="niveau1"><div><a href="#">menu2</a>
  18.    <ul>
  19.     <li><a href="#">ligne2_1</a>
  20. </li>
  21. <li><a href="#">ligne2_2</a>
  22. </li>
  23.    </ul></div>
  24.   </li>
  25. </ul>
  26. </body>
  27. </html>


fichier css.css

Code :
  1. body {
  2. margin: 0;
  3. padding: 0;
  4. background: white;
  5. font: 80% verdana, arial, sans-serif;
  6. }
  7. ul, li {
  8. margin: 0;
  9. padding: 0;
  10. list-style-type: none;
  11. }
  12. ul.niveau1 {
  13. float: left;
  14. width: 12em;
  15. }
  16. li.niveau1 {
  17. cursor: pointer;
  18. text-align: center;
  19. font-weight: bold;
  20. background: #ccc;
  21. border: 1px solid gray;
  22. margin: 1px;
  23. }
  24. .niveau1 div ul {
  25. display: none;
  26. _display: inherit;
  27. background: white;
  28. border: 1px solid gray;
  29. }
  30. .niveau1 div:hover ul{
  31. display: inherit;
  32. }


 
Je n'ai malheureusement pas réussit à faire fonctionner sans le div situé à l'intérieur du premier niveau de "ul li". Peut être que je m'y suis mal pris, mais c'est comme ça que ca a fonctionné.
 
 
(02/09 à 23:38) EDIT : version légérement simplifié pour que ca soit plus simple à comprendre.
(03/09 à 11:20) EDIT 2 : rajout d'un petit hack (la ligne "_display: inherit;" ) pour que les sous-menu ne soient plus caché sous IE.


Message édité par omega2 le 03-09-2005 à 11:09:44
Reply

Marsh Posté le 02-09-2005 à 23:47:30    

lol ton code n'a pa l'air d'etre du xhtml mais si sa marche  
bien jouer, je devrai tt de meme esayé sur firefox !!

Reply

Marsh Posté le 02-09-2005 à 23:48:55    

J'ai pas tenté la compatibilité xhtml, j'ai cherché à faire fonctionner ce menu à la con. :lol:
La premiére ligne, c'est phpedit qui l'a créé. (bon ok, j'aurais pas du lui dire que je voulais un fichier xhtml. :lol: )

Reply

Marsh Posté le 03-09-2005 à 00:21:23    

alaindeloin69 a écrit :

http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
 

Citation :

Pourquoi utiliser du javascript ?
 
Un menu déroulant peut très bien se réaliser intégralement en CSS, sans utilisation de langages de scripts, alors pourquoi allons-nous utiliser javascript dans ce didactitiel?  
Il y'a deux raisons à cela. La première est que la fonction originelle des feuilles de styles CSS est de s'occuper de la mise en page et non des aspects dynamiques de celle-ci. Ces derniers sont du domaine de Javascript (ou ECMAScript). Il s'avère que la pseudo-classe (:hover) est un peu située entre les deux : elle indique le comportement au survol mais pourrait très bien servir à des applications plus dynamiques.


 
vous avez vu que l'on peut faire ceci sans jvscript  [:itm]  [:itm]


mais j'ai jamais dit le contraire [:itm]
On peut parfaitement faire sans javascript, mais ca ne marchera pas sous IE [:itm]

Reply

Marsh Posté le 03-09-2005 à 09:11:20    

alaindeloin69 a écrit :

lol ton code n'a pa l'air d'etre du xhtml mais si sa marche  
bien jouer, je devrai tt de meme esayé sur firefox !!


 
Son code est compatible xhtml, je vois pas de problème :)


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 03-09-2005 à 09:11:20   

Reply

Marsh Posté le 03-09-2005 à 10:14:30    

En fait, j'ai vérifié, et pour passer la validation du w3c, il suffit de rajouter deux lignes au tout début de la page html :

Code :
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">


zéro erreur à la validation. :) (ouf)

Reply

Marsh Posté le 03-09-2005 à 11:06:09    

Citation :

<?xml version="1.0" encoding="iso-8859-1"?>


 
Ca c'est correct, mais si tu le mets, cette bouse d'IE passe en modèles de boites microsoft. Donc incorrect.

Message cité 1 fois

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 03-09-2005 à 11:07:21    

Ca change quoi au niveau de l'affichage?

Message cité 1 fois
Reply

Marsh Posté le 03-09-2005 à 11:07:47    

Reply

Marsh Posté le 03-09-2005 à 11:28:58    

Alors c'est pas génant. :)
je garderais ainsi. :)

Reply

Marsh Posté le 23-09-2005 à 20:07:36    

ayes, j'en ai crée un !!!!! youpi !!!! et en plus ça a l'air du xhtml (c'est ce que voulais )
 
http://robinleynaud.free.fr/untitled
 
I.E ne vas pas faire un jour une mise à jour pour qu'il puisse lire ce satané menu ???? (le mien)
 
voila je voulais juste dire ça ciao


---------------
mon site perso, allez visiter
Reply

Marsh Posté le 23-09-2005 à 21:47:10    

Ouais, enfin, j'espère que tu l'amélioreras un peu, genre mettre les liens en bloc pour qu'on soit pas obligé de survoler le lien meme, mais la case :o

Message cité 1 fois

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 23-09-2005 à 21:53:26    

ouai mais m'en fou je voulais que ça marche ;l:l apres, je le ferais plus jolie bien sûr  
 
au fait, il met qu'il n'est pas au normes le w3 ???? comment ça se fait ?


---------------
mon site perso, allez visiter
Reply

Marsh Posté le 23-09-2005 à 21:54:12    

plainsofpain a écrit :

Citation :

<?xml version="1.0" encoding="iso-8859-1"?>


 
Ca c'est correct, mais si tu le mets, cette bouse d'IE passe en modèles de boites microsoft. Donc incorrect.


Il repasse en mode Quirks [:aloy]  

omega2 a écrit :

Ca change quoi au niveau de l'affichage?


http://www.quirksmode.org/?/css/quirksmode.html
 
Il se remet à afficher les pages à la IE5

plainsofpain a écrit :

Rien :)


[:rofl]
 
Et accessoirement, le prologue XML n'est pas correct quand on sert le XHTML en tant que text/html, comme indiqué dans l'appendix C des specs XHTML1.0

Message cité 1 fois

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 23-09-2005 à 22:03:15    

voici un menu marchant tres bien sur IE et FF sans javascript.
http://www.xs4all.nl/~peterned/examples/cssmenu.html

Message cité 1 fois
Reply

Marsh Posté le 23-09-2005 à 22:11:18    

Badze a écrit :

voici un menu marchant tres bien sur IE et FF sans javascript.
http://www.xs4all.nl/~peterned/examples/cssmenu.html


body {
 behavior:url("../htc/csshover.htc" );
}


un peu de sérieux :sarcastic:


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 23-09-2005 à 22:22:44    

Oups, j'avais pas vu :ange: , je suis décu d'apprendre cette nouvelle

Reply

Marsh Posté le 25-09-2005 à 17:07:36    

zut de zut, je ne comprend pas, j'arrive pas à faire de la page du menu que j'ai crée un page au normes ....
 
je ne comprend pas ce que me dit le validator.w3 ....
 
je sais que ne sert a rien qu'elle soit au normes car elle a zéro d'utilité mais plutôt pour prendre un exemple pour mes autres pages ..
 
ciao  @++ merci


---------------
mon site perso, allez visiter
Reply

Marsh Posté le 25-09-2005 à 17:19:25    

Tidy est pas content sur http://robinleynaud.free.fr/untitled parce qu'il y a 2 balise html en haut.


---------------
"L'informatique n'est pas plus la science des ordinateurs que l'astronomie n'est celle des télescopes." Michael R. Fellows & Ian Parberry
Reply

Marsh Posté le 25-09-2005 à 17:32:18    

yes ..... merci ciao @+++ bye aurevoir good bye, salut, hello, dzantien (chinoi)


---------------
mon site perso, allez visiter
Reply

Marsh Posté le 25-09-2005 à 17:50:05    

masklinn a écrit :

[:rofl]


 
Dans son cas ca change quasiment rien :p


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 25-09-2005 à 20:19:57    

plainsofpain a écrit :

Ouais, enfin, j'espère que tu l'amélioreras un peu, genre mettre les liens en bloc pour qu'on soit pas obligé de survoler le lien meme, mais la case :o


 
justement, j'avais éssayé et voila ce que ça fait :
http://robinleynaud.free.fr/untitled
 

ul#menu  li a {
display: block;
height: 1.5em;
width: 110px;
background: #cc99ff;
text-indent: 10px;
border: solid 1px black;
     }


 
au lieu de  
 

ul#menu  li {
display: block;
height: 1.5em;
width: 110px;
background: #cc99ff;
text-indent: 10px;
border: solid 1px black;
     }


 
je pense que c'était ça qu'il fallait faire, mais tu as bien vu ce que ça fait sur .F.F. ????
 
comment faut-il que je fasse ?


---------------
mon site perso, allez visiter
Reply

Marsh Posté le 25-09-2005 à 22:20:20    

Je suis sous Opera mais bon ca fait la meme chose que sous ff je pense.
 
la partie

Code :
  1. #menu li:hover ul


 
C'est la qu'il faut que tu modifies. Le positionnement relatif conviendrai mieux que l'absolue je pense.
 
Va voir la : http://www.openweb.eu.org/articles/initiation_flux/
 
Edit : Quoiqu'en changeant les valeurs de top et left ca pourrait etre mieux.


Message édité par plainsofpain le 25-09-2005 à 22:21:34

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 26-09-2005 à 17:21:20    

c'est bien merci mais le probleme c'est que sa marche pas tout le temps le :hover, c'est a dire que parfois il ne s'affiche pas le 2emme menu alors que le curseur et bien sur un lien qui fonctionne, enfin tu verras par toi meme que sa foire un peu ....


Message édité par alaindeloin69 le 26-09-2005 à 21:44:55

---------------
mon site perso, allez visiter
Reply

Marsh Posté le 26-09-2005 à 18:14:15    

omega2 a écrit :

ce qu'est marrant, c'est que chez alsacreation, dés qu'on désactive javascript, les exemple soit disant sans javascript ne marche plus sous firefox et j'ai pas osé testé avec IE.


Euh il faudrait lire tout le tutoriel aussi ;)
 
Le résumé est celui-ci :
- on peut le faire sans JS
- mais ça ne marchera pas sur IE
- pour des raisons d'accessibilité, le menu *doit* être visible sans JS (aucun sous-menu caché)
- donc sans JS, le menu est affiché intégralement et il n'y a évidemment pas de comportement dynamique
 
D'ailleurs je rappelle que dans *tous* les cas, un menu déroulant va poser des soucis d'accesibilité. Qu'il soit en JS ou en CSS intégral.
Le mieux est de faire en sorte que le menu s'affiche intégralement (entièrement déroulé et visible) quand le navigateur ne dispose ni de JS ni de CSS.


Message édité par sibelius le 26-09-2005 à 18:17:30

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 27-09-2005 à 18:32:07    

vous avez vu le probleme que sa fait, c'est pas trop dynamique, sa foire ...
comment faire pour mettre que mes menu survolés soit afichés quand on survole le lien et non le LI ?????

Message cité 1 fois
Message édité par alaindeloin69 le 27-09-2005 à 18:32:40

---------------
mon site perso, allez visiter
Reply

Marsh Posté le 27-09-2005 à 18:37:32    

alaindeloin69 a écrit :

vous avez vu le probleme que sa fait, c'est pas trop dynamique, sa foire ...
comment faire pour mettre que mes menu survolés soit afichés quand on survole le lien et non le LI ?????


Je n'ai pas tout suivi, mais le :hover s'applique à quelle balise ? <a> ou <li> ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 27-09-2005 à 18:55:39    

a <li> mais va sur robinleynaud.free.fr/untitled


Message édité par alaindeloin69 le 27-09-2005 à 18:56:26

---------------
mon site perso, allez visiter
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed