Menu deroulant | css

[omzen]

bonsoir internautes

Au fur et à mesure de mes avancées, je mets la barre un peu plus haut oui mais voilà sans votre aide, je n'arrive à rien.

Je refais une beauté au site de ma petite association. Pour ça, j'ai mis en place un menu html/CSS que j'ai trouvé via http://www.jutix-production.com/tutoriel-creer-menu-css.php

Le procédé est 'simple' il suffit de créer le menu prototype sur photoshop et le programmer en css. Ce que j'aime dans cette technique c'est le fait de pouvoir programmer exactement les couleurs que je veux dans chacun des menus principaux. Mais le problème c'est que je ne sais pas comment faire pour le transformer en un menu déroulant !
J'ai bien mes 7 rubriques de menu qui s'activent avec la souris mais je perds les sous-menus qui restent quand même bien utiles.

Auriez-vous des suggestions ou des ressources adaptées à ce sujet ? Vous en remerciant par avance.

le site en question est : http://www.coeuraccords.com/CLCA/index.html
Press ENTER to look up in Wiktionary or CTRL+ENTER to look up in Wikipedia

 

[Anonyme]

Je ne vois pas de sous-menus dans le code de ton site...

Bon sinon les menus déroulants ne se font pas uniquement en css, c'est une très mauvaise idée : pleins de problèmes au niveau de l'accessibilité et de la gestion de la souris.

Le mieux c'est css pour le design et javascript pour gérer le tout, ça peut se faire plus ou moins facilement (je ne connais pas ton niveau) avec jquery et le plugin superfish.


P.S. : ton image d'entête est illisible et... heu, pas très belle... :sick:

 

[eNeos]

Bonjour,

Effectivement pour les menus déroulants, il est judicieux d'utiliser un petit peu de javascript.
Pour un menu simple (exemple sur http://eneos.free.fr/ qui peut se positionné aussi bien en horizontal qu'en vertical), j'ai utiliser quelques lignes de javascript pour le fonctionnement et du CSS pour le design.

iubito (http://iubito.free.fr) avait fait un tuto relativement bien ficelé à ce sujet, bien que pas parfait. Malheureusement il a disparu suite à quelques intrusions Peut-être que google en a gardé quelques traces.

Après, pour rendre le déroulement visible, je ne maitrise pas.

 

[Anonyme]

Tu as été voir les exemples sur le site que je t'ai donné? C'est assez simple à mettre en œuvre…

 

[TheBrain]

en pas trop compliqué aussi tu as en xml

c'est plus facile que le javascript et ca marche bien

 

[Anonyme]

En xml?

 

[TheBrain]

ouais moi je suis en train de concevoir un site web pour une entreprise ou le menu est entierement fait dans le langage xml ce qui permet qu'il soit déroulant sans javascript ^^

 

[Anonyme]

Tu veux dire que le contenu du menu est en xml mais il doit bien être affiché et animé par quelque chose non? Du flash?

 

[TheBrain]

une bride d'actionscript dans un fichier flash, rien qui soit difficile...

 

[Anonyme]

Peut-être mais utliser du flash pour un menu, c'est utiliser un bazooka pour tuer une mouche, alors qu'avec Javascript ça fonctionne partout.

Et c'est accessible (avec superfish).

 

[sebastiano]

Euh en JS ça ne fonctionnera pas forcément partout (il faut encore que l'utilisateur ne l'ait pas désactivé).

Je ne pense pas qu'il y ait de meilleure solution, que cela soit en JS ou en CSS. Ils dépendent tous deux de l'interprétation du navigateur, et peuvent donc avoir deux rendus différents. Le site sur lequel je bosse actuellement utilise du JS pour un menu déroulant et j'ai un petit souci d'adaptation pour un même navigateur selon qu'il soit sur Windows ou OS X. En ce qui concerne le CSS c'est pareil.

Ceci dit je pinaille, c'était histoire d'être parfaitement clair.

Dans tous les cas va au plus simple et/ou au langage que tu maîtrises le mieux. Pour ma part les menus déroulants simples c'est full CSS.

 

[Anonyme]

Quand je dis JS c'est bien entendu associé au CSS, mais CSS seul non. Si JS est désactivé il suffit d'adapter la page, par exemple avec ceci dans le head de la page, avant les css :

  <script type="text/javascript">
	document.documentElement.className ="hasJS " + document.documentElement.className;
</script>

Ça ajoute une classe "hasJS" sur l'élément <html>, donc si JS est activé. À partir de la on peut afficher le menu déplié sur le côté gauche par exemple si JS est désactivé.

 

[eNeos]

A nouveau d'accord avec gloup gloup, aussi bien sur le flash que sur la désactivation du javascript.
Et encore, pour l'histoire de désactivation du JS, je n'ai même pas retrouvé de "hasJS" quelconque dans le code de mon site. J'ai du faire encore plus simple... si tant est que cela soit possible.
Quant au flash, hormis les goûts et couleurs (j'ai horreur de ça), il est encore moins universel que le JS... Le JS il faut le désactiver, le flash il faut l'installer...

Maintenant, pour les soucis de rendus, il y a effectivement des différences selon les navigateurs, mais cela se gère également relativement bien dans le JS.

 

[omzen]

Le sujet fait débat...

Merci pour vos précisions mais je dois dire que trop d'information tue l'information.

Je suis débutant ; je n'ai pas encore mis de sous-menu parce que je ne sais pas faire. Ou du moins, je cherche à trouver comment réaliser ce que je désire.

J'en avais fait un une fois avec du javascript (http://www.siteduzero.com/tutoriel-3-37795-creer-un-menu-horizontal-deroulant-en-css.html) mais après coup, le rendu ne me plait pas et Internet Explorer continuait à me faire c****.

Je cherche à réaliser un menu déroulant (css?) avec des couleurs différentes, type arc-en-ciel.

Pour ce qui est de l'image de l'en-tête : illisible et moche, j'entends la critique mais critiquer sans conseiller n'a à mon sens aucun intérêt si ce n'est de se défouler...

Je ne vais pas m'aventurer dans du flash, ça c'est sûr. Javascript me semble mieux. Merci Gloup pour le code au cas ou le JS soit désactivé.

Pensez-vous que je peux utiliser mon modèle photoshop pour créer ledit menu?
Press ENTER to look up in Wiktionary or CTRL+ENTER to look up in Wikipedia

 

[eNeos]

Je pense que tu mélanges 2 choses. Le fonctionnement du menu et le design du même menu.

Le javascript ne s'occupe que du fonctionnement. En 2 mots, le javascript contient "si la souris et sur tel menu, alors affiche le sous menu correspondant".
Pour le design, que ce soit des images, du texte, en bleu, en rose, opaque, transparent, beau ou moche, c'est le CSS qui le défini.

Donc si tu veux des menus graphiquement textuels, d'une belle opacité translucide, le tout d'une beauté abominable et des couleurs à faire pâlir le rainbow flag, c'est avec le CSS que tu y arriveras, pas avec le javascript

Pour commencer, tu pourrais repartir de l'exemple du site des zéros et jouer uniquement avec le CSS pour bien comprendre le truc et y inclure tes menus.

 

[omzen]

Merci Eneos pour ta précision -toujours bonne à prendre.
Je crois que j'avais vaguement compris la chose.

Donc je dois pouvoir le faire?!

Il me suffit de réussir à intégrer le javascript du site du zéro par exemple et de réussir à programmer correctement en css mon modèle photoshop pour afficher les sous-menus !

J'ai une petite idée, je vais voir si je parviens à la concrétiser...
Merci pour vos contributions.
Press ENTER to look up in Wiktionary or CTRL+ENTER to look up in Wikipedia

 

[Anonyme]

Press ENTER to look up in Wiktionary or CTRL+ENTER to look up in Wikipedia

Pourquoi il y a ce genre de texte à la fin de tes messages?

 

[omzen]

Je me posais la même question, vois-tu !?

Ce texte se rajoute contre mon gré après l'envoi de mes messages.
J'ignore encore d'où ça vient.