Menu déroulant

[blaco]

Bonjour à tous,
Je souhaite incorporer dans mon site des menus déroulant pour faciliter la navigation (J'aime bien ceux du menu du haute du site d'Adobe).
Quel logiciel est le mieux adapté pour réaliser ces menus et surtout que ce soit compatible avec le max de navigateurs.
Mon site a été créé avec Dreamweawer, avec un bandeau Flash.
Ma question est surtout pour avoir la piste la meilleure. Pour la réalisation je pense pouvoir m'en sortir.
Merci de vos réponses.
:zen:

 

[Anonyme]

Je ne connais pas flash mais voici la façon de faire en html/css/javascript et de manière accessible.

 

[richard-deux]

Il y a sur ce site de nombreux modèles.

Mais attention à la compatibilité avec les différents navigateurs.

 

[blaco]

Merci pour vos réponses, exactement ce que je cherche.

Ces menus CSS sont-ils compatibles avec tous les navigateurs? ou y-a-t-il des probs?

 

[g.lebourgeois]

méfie toi d'Internet Explorer...

 

[Anonyme]

Merci pour vos réponses, exactement ce que je cherche.

Ces menus CSS sont-ils compatibles avec tous les navigateurs? ou y-a-t-il des probs?

Non ils fonctionnent sur tous les navigateurs actuels.

 

[blaco]

Ah alors pas de souci... je vais me lancer dans l'aventure.
Merci à tous!

 

[Anonyme]

méfie toi d'Internet Explorer...

IE6 fonctionnent bien si on lui donne un doctype correct. Il y a juste quelques rares petits bugs ici ou là mais ils sont connus et les solutions existent comme les commentaires conditionnels.

 

[blaco]

Merci du complément, c'est clair, il faut être entièrement compatible avec IE, il est quand même très répandu... :hein:

 

[Anonyme]

Si tu sépares bien le contenu de la présentation de façon sémantique en n'utilisant pas la mise en page par tableaux, tu peux faire une page qui «s'affichera» correctement que ce soit à l'impression, sur les GSM et PDA, avec un lecteur vocal, etc.

Voici 2 tutos aux choix :

• CSS : on reprend tout à zéro !
• Un site dynamique avec PHP !

 

[Benjamin D.C.]

Je ne connais pas flash mais voici la façon de faire en html/css/javascript et de manière accessible.

Mouais... c'est quand même pas génial hein le coup de la liste de définitions

 

[Anonyme]

Mouais... c'est quand même pas génial hein le coup de la liste de définitions

Chipoteur. Bon sinon il y a celui-là.

edit : personnellement, je n'aime pas menus déroulants, je préfère découper le site en section et sous sections.

 

[Benjamin D.C.]

Chipoteur.

Oui je sais, c'est pathologique...:rateau:

Bon sinon il y a celui-là.

Vooiillààà, ça c'est bien!

edit : personnellement, je n'aime pas menus déroulants, je préfère découper le site en section et sous sections.

Entièrement d'accord! :zen:

 

[Pochtroi]

Je ne comprend pas, avec ton premier exemple, Gloup gloup, je ne peux mettre que du texte dans mon menu: pas d'images ou de liens...

 

[Anonyme]

Quoi si tu fais un

<li><img src="monimage.jpg" alt="entrée du menu" /></li>

ça ne marche pas?

 

[Pochtroi]

C'est dans le premier niveau du menu que ça ne marche pas.
J'essaie maintenant un autre code qui me semble plus simple, qui marche mieux mais qui déconne aussi un peu: Après avoir légèrement modifié le css pour l'adapter à ma page, les menus se déroulent bien mais si je cherche un lien du menu déroulé, il disparait...

EDIT: Résolu... j'avais mis une petite connerie dans mon code... Donc le menu ci-dessus me parait plus simple et surtout plus souple puisque je peux mettre des images et des liens dans les grands titres du menu...

 

[Pochtroi]

Bon, ça marche, ça marche... Tout est relatif...
En fait, j'ai réussi à inclure mon menu dans mes pages (voir ici) mais quoique je fasse, il ne veut pas être centré Du coup, le petit accordéon qui est censé se placer au-dessus du chapitre en cours est placé n'importe où...

PS: Il est possible que de temps en temps, le lien déconne puisque c'est celui sur lequel je suis en train de travailler...

Edit: Le code source est visible dans mon message suivant, le CSS est ici et le javascript est là

 

[fredmac75]

Mouais... c'est quand même pas génial hein le coup de la liste de définitions

Pourtant d'un point de vue sémantique, c'est vachement bien vue. Cerise sur le gateau, avec une <dl>...</dl> on a davantage de contrôle.

 

[Pochtroi]

je viens de voir que le code source n'est pas dispo: il est là:

<table border="0" cellpadding="2">
  <tbody>
    <tr>
      <td>
      <h4> <!-- Ma balise h4 est censée être centrée -->
<!-- Affichage du petit accordeon -->
if ($iroquoi=="creations")
{ ?><img style="width: 619px; height: 46px;" alt="" src="Iroquois/creations-accueil.gif" /><?php }
elseif ($iroquoi=="reparations")
{ ?><img style="width: 619px; height: 46px;" alt="" src="Iroquois/reparations-accueil.gif" /><?php }
elseif ($iroquoi=="occasions")
{ ?><img style="width: 619px; height: 46px;" alt="" src="Iroquois/occasions-accueil.gif" /><?php }
elseif ($iroquoi=="contact")
{ ?><img style="width: 619px; height: 46px;" alt="" src="Iroquois/contact-accueil.gif" /><?php }
else
{ ?><img style="width: 619px; height: 46px;" alt="" src="Iroquois/iroquoi-accueil.jpg" /><?php } ?><br />

<!-- Menu par lui même -->
<span id="menu">
	<dl onmouseout="document.Accueil.src='Boutons/btnaccueilrouge.jpg'" onmouseover="document.Accueil.src='Boutons/btnaccueilbleu.jpg'">
		<dt onmouseup="document.Accueil.src='Boutons/btnaccueilbleu.jpg'" onmousedown="document.Accueil.src='Boutons/btnbubulle.jpg'" onmouseover="javascript:montre('');">
			<a href="javascript:ahah('Fratelibenar-Accueil.php?provenance=reparations','page');">
				<img style="border: 0px solid ; width: 119px; height: 24px;" name="Accueil" alt="Accueil" src="Boutons/btnaccueilrouge.jpg" />
			</a>
		</dt>
	</dl>
	[...]	
	<dl onmouseout="document.Reparations.src='Boutons/btnreparationsjaune.jpg'" onmouseover="document.Reparations.src='Boutons/btnreparationsbleu.jpg'">	
		<dt onmouseup="document.Reparations.src='Boutons/btnreparationsbleu.jpg'" onmousedown="document.Reparations.src='Boutons/btnbubulle.jpg'" onmouseout="javascript:montre('');" onmouseover="javascript:montre('smenu3');">
			<a href="javascript:ahah('Fratelibenar-Reparations.php?provenance=reparations','page');">
				<img style="border: 0px solid ; width: 119px; height: 24px;" name="Reparations" alt="La R&eacute;paration d'accord&eacute;ons" src="Boutons/btnreparationsjaune.jpg" />
			</a>
		</dt>
		<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="javascript:ahah('Fratelibenar-Reparations.php?provenance=reparations&amp;select=1','page');">Fonctionnement d'un accord&eacute;on</a></li>
				<li><a href="javascript:ahah('Fratelibenar-Reparations.php?provenance=reparations&amp;select=2','page');">R&eacute;parations courantes</a></li>
				<li><a href="javascript:ahah('Fratelibenar-Reparations.php?provenance=reparations&amp;select=3','page');">L'accordage</a></li>
			</ul>
		</dd>
	</dl>
	
[...]

<script type="text/javascript">
montre('');
</script>
</span></h4>
      </td>
    </tr>
  </tbody>
</table>

 

[Benjamin D.C.]

Pourtant d'un point de vue sémantique, c'est vachement bien vue. Cerise sur le gateau, avec une <dl>...</dl> on a davantage de contrôle.

Nos avis divergent sur ce point.