faire un menu avec des cases autonomes en css/html (+javascript)

Saint Angel · 26/04/2008, 12h09

Bonjour, dans l'optique d'un projet universitaire je suis actuellement en train de faire un site web, et je suis assez novice en la matière. Mais je ne suis pas inculte non plus, j'ai quand même un certain nombre de connaissances basiques.

Mon problème majeur pour le moment se situe dans la réalisation du menu horizontal.

en fait le résultat souhaité ressemble à cela : http://www.ina.fr/actualites/index.html
(le menu horizontal principal : archives, formation, actualités...)

Mais je n'ai aucune idée de la réalisation de ce type de menu.
Donc, voilà, j'ai vu beaucoup de tutoriels sur le net, des générateurs, etc., mais je n'ai pas réussi à trouver comment faire pour que chaque case soit bien autonome comme sur l'exemple.

Merci d'avance et bon week-end.

(edit général)

Shockwave · 26/04/2008, 12h29

Je suis pas expert non plus mais les menus du site que tu donnes ne peuvent pas, à ma connaissance, être programmés en xhtml/css, ça doit être du javascript...

Saint Angel · 26/04/2008, 12h33

Oui, j'aurais du être plus précis, quand je parlais de css/html je pensais aussi à inclure du javascript (en fait je ne crois pas avoir le choix).

Panzerjo MILKS · 26/04/2008, 12h44

Il doit y avoir des plugin tous fait pour ca, mais ca peut se faire avec les balises <div>, qui apparaissent ou pas lorsque tu survole la zone. Par contre pour obtenir l'effet d'apparition (que ce soit pas net, mais que ca grandisse) là je sais pas. C'est pas bien dure à utiliser, il doit y avoir pas mal de tuto sur les event et les divs.

Krogoth · 26/04/2008, 13h31

Citation :

Publié par Shockwave

Je suis pas expert non plus mais les menus du site que tu donnes ne peuvent pas, à ma connaissance, être programmés en xhtml/css, ça doit être du javascript...

Euh le CSS peux parfaitement arriver a ca.

Romuald · 26/04/2008, 13h40

Citation :

Publié par Krogoth

Euh le CSS peux parfaitement arriver a ca.

Le jour ou le CSS introduira de quoi faire du while fait revenir le sujet que ça m'en informe, histoire de demander une augmentation pour ne pas avoir un métier utilisant un langage limité.

Sinon, pour l'effet déroulant ils utilisent mootools, soit tu lis la docs, soit t'es du genre autodidacte et tu t'en sors sans, soit tu fais juste un css/js (pour IE6 au minimum avec genre un expression pour injecter ta fonction JS en CSS, les autres navigateurs support la pseudo class hover).

Krogoth · 26/04/2008, 14h46

Il semblait que le CSS pouvait faire de bon menu sans l'aide de js...enfin.

BlackFury FRA · 27/04/2008, 04h21

Citation :

Publié par Krogoth

Il semblait que le CSS pouvait faire de bon menu sans l'aide de js...enfin.

Oui mais pas seul, comme Romuald te fait remarquer.

Hadrian · 27/04/2008, 11h34

Bonjour,
Cela ce fait en XHTML/CSS avec une pointe de js.
Il y a un très bon tuto sur Le SiteDuZér0 pour en faire un, après tu pourras très bien le personnalise a ta façon.
Bonne chance.

Romuald · 27/04/2008, 11h56

Il n'est pas trop mal, sauf le coup du onload, pas de navigation tant que les images ne sont pas chargées.

Eno · 27/04/2008, 12h08

Je pense que pour les tutos le mieux reste Alsacreations =) css/xhtml/js

Sylm · 27/04/2008, 12h52

Citation :

Publié par Eno

Je pense que pour les tutos le mieux reste Alsacreations =) css/xhtml/js

Sauf que là pour l'exemple, c'est raté niveau bonnes pratiques.

Eno · 27/04/2008, 14h59

Citation :

Publié par Sylmerìn

Sauf que là pour l'exemple, c'est raté niveau bonnes pratiques.

C'est à dire ?

Y'a des trucs à pas faire dedans ?

Sylm · 27/04/2008, 19h39

Citation :

Publié par Eno

C'est à dire ? Y'a des trucs à pas faire dedans ?

- Eviter les javascript:
- Globalement éviter le javascript en plein html
- En javascript, tu peux ne pas associer plusieurs gestionnaires au même événement pour le même element. Du coup son window.onload = xxx s'annule si plus tard dans la page html, il y a un appel à un fichier js (<script type="text/javascript" src=".."></script>) qui contient aussi un window.onload = yyy.
- Attributs href vide ou même #, sémentiquement, ca n'a pas de sens.

Voilà

Romuald · 27/04/2008, 19h58

Citation :

Publié par Sylmerìn

- Eviter les javascript:
- Globalement éviter le javascript en plein html
- En javascript, tu peux ne pas associer plusieurs gestionnaires au même événement pour le même element. Du coup son window.onload = xxx s'annule si plus tard dans la page html, il y a un appel à un fichier js (<script type="text/javascript" src=".."></script>) qui contient aussi un window.onload = yyy.
- Attributs href vide ou même #, sémentiquement, ca n'a pas de sens.

Voilà

Je subodore que les # dans le href ce n'est qu'à titre d'exemple. Mais je me trompe peux-être.
Par contre foutre du onload n'est jamais bien, pour peu qu'une image/flash dans la page tarde et c'est la catastrophe. Plutôt opter pour un domready, ou alors une balise script en bas de page qui appelle une function de load.

PS: le javascript en plein HTML ce n'est pas sale.

arkiel · 28/04/2008, 16h48

http://www.alistapart.com/articles/horizdropdowns/

c'est une version avec un menu vertical et des dropdowns horizontaux, mais tu peux l'adapter

Shockwave [BoGz] Alpha & Oméga	Je suis pas expert non plus mais les menus du site que tu donnes ne peuvent pas, à ma connaissance, être programmés en xhtml/css, ça doit être du javascript...
26/04/2008, 12h29

Saint Angel Bagnard	Oui, j'aurais du être plus précis, quand je parlais de css/html je pensais aussi à inclure du javascript (en fait je ne crois pas avoir le choix).
26/04/2008, 12h33

Panzerjo MILKS Alpha & Oméga	Il doit y avoir des plugin tous fait pour ca, mais ca peut se faire avec les balises <div>, qui apparaissent ou pas lorsque tu survole la zone. Par contre pour obtenir l'effet d'apparition (que ce soit pas net, mais que ca grandisse) là je sais pas. C'est pas bien dure à utiliser, il doit y avoir pas mal de tuto sur les event et les divs.
26/04/2008, 12h44

Krogoth Alpha & Oméga	Citation : Publié par Shockwave Je suis pas expert non plus mais les menus du site que tu donnes ne peuvent pas, à ma connaissance, être programmés en xhtml/css, ça doit être du javascript... Euh le CSS peux parfaitement arriver a ca.
26/04/2008, 13h31

Krogoth Alpha & Oméga	Il semblait que le CSS pouvait faire de bon menu sans l'aide de js...enfin.
26/04/2008, 14h46

BlackFury FRA [cddra] Alpha & Oméga	Citation : Publié par Krogoth Il semblait que le CSS pouvait faire de bon menu sans l'aide de js...enfin. Oui mais pas seul, comme Romuald te fait remarquer.
27/04/2008, 04h21

Hadrian Empereur	Bonjour, Cela ce fait en XHTML/CSS avec une pointe de js. Il y a un très bon tuto sur Le SiteDuZér0 pour en faire un, après tu pourras très bien le personnalise a ta façon. Bonne chance.
27/04/2008, 11h34

Romuald Alpha & Oméga	Il n'est pas trop mal, sauf le coup du onload, pas de navigation tant que les images ne sont pas chargées.
27/04/2008, 11h56

Eno Alpha & Oméga	Je pense que pour les tutos le mieux reste Alsacreations =) css/xhtml/js
27/04/2008, 12h08

Sylm Alpha & Oméga	Citation : Publié par Eno Je pense que pour les tutos le mieux reste Alsacreations =) css/xhtml/js Sauf que là pour l'exemple, c'est raté niveau bonnes pratiques.
27/04/2008, 12h52

Eno Alpha & Oméga	Citation : Publié par Sylmerìn Sauf que là pour l'exemple, c'est raté niveau bonnes pratiques. C'est à dire ? Y'a des trucs à pas faire dedans ?
27/04/2008, 14h59

arkiel Alpha & Oméga	http://www.alistapart.com/articles/horizdropdowns/ c'est une version avec un menu vertical et des dropdowns horizontaux, mais tu peux l'adapter
28/04/2008, 16h48

faire un menu avec des cases autonomes en css/html (+javascript)

Connectés sur ce fil