Menu

Bonjour,

Les tutoriaux pour un menu vertical ou un menu horizontal sont supers. Mais je voudrais faire une page avec les deux à la fois : un menu horizontal et un menu vertical. J'avoue que je me mélange les pinceaux en faisant des "copier" "coller". Comment fait on ?

Merci de votre attention

Bonjour,

Tu parles de quels menus exactement? Des menus simples ou des menus déroulants?

(Remarque: si tu souhaites avoir un menu déroulant horizontal et un menu déroulant vertical, alors tu as sans doute un très très grave problème de conception de l'interface de ton site.)

Merci Vincent pour ta réponse et ta remarque. Effectivement j'ai omis de préciser.
Il s'agit d'un
menu horizontal simple (pour évoquer des situations d'utilisation d'outils par exemple)
menu vertical déroulant (pour lister les différents outils utilisables)
J'espère que je suis plus précis comme ça
Merci

Oui, c'est effectivement plus précis.

Pour le menu horizontal simple, eh bien il te suffit d'avoir un code HTML de base pour ton menu:

<ul id="menu-situations">
	<li><a href="...">Situation 1</a></li>
	<li><a href="...">Situation 2</a></li>
	...
	<li><a href="...">Situation N</a></li>
</ul>

Ensuite, côté CSS tu pourras le mettre en forme (en faisant flotter les li ou bien en utilisant display: inline. Pour les détails, je t'invite à t'inspirer du tutoriel Créer des menus simples en CSS.

Pour le deuxième menu, tu auras sans doute un code sur ce modèle:

<ul id="menu-outils">
	<li>Catégorie 1
		<ul>
			<li><a href="...">Outil 1</a></li>
			<li><a href="...">Outil 2</a></li>
			<li><a href="...">Outil 3</a></li>
		</ul>
	</li>
	<li>Catégorie 2
		<ul>
			<li><a href="...">Outil 4</a></li>
			<li><a href="...">Outil 5</a></li>
		</ul>
	</li>
	[i]etc.[/i]
</ul>

Pour celui-là, tu vas avoir deux objectifs:
1. le mettre en forme (CSS);
2. le rendre dynamique (Javascript) et notamment réactif au survol et au focus lors de la navigation au clavier.

Le menu déroulant proposé sur Alsacréations n'est pas vraiment le meilleur candidat pour remplir ces deux objectifs. Je te propose donc d'aller voir ailleurs, par exemple ici:
http://www.htmldog.com/articles/suckerfish/dropdowns/

Perry a écrit :
Merci Vincent...

a écrit :
Alors qu'il cherchait un raccourcis que jamais il ne trouva...Florent V.incent les a vus...
Maintenant, Florent Vincent sait que les Envahisseurs sont là, qu'ils ont pris forme humaine et qu'il lui faut convaincre un monde incrédule que les standards sont en marche et que le cauchemar a déjà commencé...

6l20 a écrit :

Alors qu'il cherchait un raccourcis que jamais il ne trouva...Florent V.incent les a vus...
Maintenant, Florent Vincent sait que les Envahisseurs sont là, qu'ils ont pris forme humaine et qu'il lui faut convaincre un monde incrédule que les standards sont en marche et que le cauchemar a déjà commencé...

Sans compter que la vérité est ailleurs.

Laurent Denis a écrit :
Sans compter que la vérité est ailleurs.

Toi, tu sais quelque chose...

Florent,

Désolé de réagir si tardivement.
Je te remercie pour ces précisions.
Je devrais pouvoir m'en sortir même si le lien que tu m'a donné tombe sur un tutoriel en anglais. Il apparait plus complet.
Cordialement