Demande pour Menu de Navigation (Liste déroulante)

Bonjour,

Je voudrai faire un menu de navigation rapide; avec la spécialité que quand je choisit un onglet une image s'affiche ; un autre une autre image ...

Comme ici : http://www.zappingconception.com/new-caddie-couleur-347-12.html
Exemple que me demande mon maître de stage ; mais j'ai essayer avec disabled et autres je n'y arrive pas ..
J'ai réussi avec les boutons radio mais lui veut absolument un menu de navigation rapide .

Si quelqu'un pouvait me faire parvenir un code pour que cela marche ; merci ! Smile
Si vous voulez mon code pas de problème !

Merci d'avance de votre aide !

Une recherche dans la section "apprendre" du site avec le mot clé "menu" devrait t'aider à trouver quelques pistes...

Déjà fait je n'ai trouver en rien mon Bonheur !

Salut,

Soici quelques liens avec des tuto:

Uniquement en CSS:
http://www.tuto-fr.com/tutoriaux/tutorial-menu-deroulant-css.php
http://www.css-faciles.com/menu-deroulant.php

Avec du JS
http://www.computure.net/fr/jquery/32-tutorial-jquery-menu-deroulant-simple

Il suffit de chercher un peu

Pourtant sur cette page, il y a deux liens vers ces deux autres pages qui pourraient aussi t'aider.

CSS Menu Generator
CSS Menus

Tu n'as pas compris ce que je veux...

Je veux une Liste déroulante avec plusieurs choix et que quand je sélectionne un choix une image s'affiche à côter et non un menu .

Sa je trouve par tous ...

Mabelle a écrit :
Eh bien non, ce n'est pas clair du tout...

D'après l'exemple que tu donnes dans ton premier post, c'est un menu avec sous-menu qui s'affiche à côté.

Ce n'était pas clair mais je pense que Rainarkan parlait du contenu de la page, au centre, et pas du menu à gauche ou de l'en-tête en haut ou du pied de page ou de toute autre partie de la page. Note en passant à Rainarkan: il aurait été plus efficace de préciser de quelle partie de la page tu parlais, plutôt que de dire seulement «je veux un truc comme ici».

Et donc, c'est le genre de chose qui peut se faire:
- Avec un élément SELECT (à ne pas styler comme sur la page donnée en exemple, par pitié).
- Et du JavaScript pour réagir au choix de l'une ou l'autre option et mettre à jour le contenu de la page.

Les bases de JavaScript sont-elles connues? Si non, on commencera sans doute par là.

Florent V. a écrit :
Ce n'était pas clair mais je pense que Rainarkan parlait du contenu de la page, au centre

Ah oui, là je comprends mieux. Je suis retournée voir mais je dois avouer que ça ne m'a pas sauté aux yeux tout de suite...

Voilà mon code :

<tr>
<td style="width:130px;color:#444444">&nbsp;Type de travail : </td>
<td style="width:570px;color:#444444;"><br />
&nbsp;<input type="radio" value="flyers" name="travail" id="travail_flyers" onclick="document.getElementById('ferme_l').disabled=true;document.getElementById('ferme_h').disabled=true;document.getElementById('ouvert_l').disabled=false;document.getElementById('ouvert_h').disabled=false;document.getElementById('menu_deroulant').disabled=true"/><label for="travail_flyers">&nbsp;Flyers </label><br />
&nbsp;<input type="radio" value="dépliants" name="travail" id="travail_depliants" onclick="document.getElementById('ferme_l').disabled=true;document.getElementById('ferme_h').disabled=true;document.getElementById('ouvert_l').disabled=true;document.getElementById('ouvert_h').disabled=true;document.getElementById('menu_deroulant').disabled=false"/><label for="travail_depliants">&nbsp;D&eacute;pliants</label>
<select size="1" name="menu_deroulant" id="menu_deroulant" onchange="document.getElementById('image1').src=this.value;document.getElementById('image2').src=this.value;document.getElementById('image3').src=this.value;document.getElementById('image4').src=this.value;document.getElementById('image5').src=this.value">
<option>&nbsp;S&eacute;lectionnez un type de plis</option>
<option value="http://www.zappingconception.com/depliants/images/1pli-2volets-verticale.jpg">&nbsp;1pli 2volets vertical</option>
<option value="http://www.zappingconception.com/depliants/images/1pli-2volets-horizontale.jpg">&nbsp;1pli 2volets horizontal</option>
<option value="http://www.zappingconception.com/depliants/images/2plis-roules-3volets.jpg">&nbsp;2plis roulés 3volets</option> 
<option value="http://www.zappingconception.com/depliants/images/3plis-zig-zag-4volets.jpg">&nbsp;3plis zig-zag 4volets</option>
<option value="http://www.zappingconception.com/depliants/images/plis-portefeuilles.jpg">&nbsp;plis portefeuille</option>
</select><br />
<img id="image1" src="http://www.zappingconception.com/dpepliants/images/1pli-2volets-vertical.jpg" style="display:block"/>
<img id="image2" src="http://www.zappingconception.com/depliants/images/1pli-2volets-horizontale.jpg" style="display:none"/>
<img id="image3" src="http://www.zappingconception.com/depliants/images/2plis-roules-3volets.jpg" style="display:none"/>
<img id="image4" src="http://www.zappingconception.com/depliants/images/3plis-zig-zag-4volets.jpg" style="display:none"/>
<img id="image5" src="http://www.zappingconception.com/depliants/images/plis-portefeuilles.jpg" style="display:none"/>

<br />
&nbsp;<input type="radio" value="plaquette" name="travail" id="travail_plaquette" onclick="document.getElementById('ferme_l').disabled=false;document.getElementById('ferme_h').disabled=false;document.getElementById('ouvert_l').disabled=false;document.getElementById('ouvert_h').disabled=false;document.getElementById('menu_deroulant').disabled=true"/><label for="travail_plaquette">&nbsp;Plaquette </label><br />
&nbsp;<input type="radio" value="Piqûre catalogue" name="travail" id="travail_catalogue" onclick="document.getElementById('ferme_l').disabled=false;document.getElementById('ferme_h').disabled=false;document.getElementById('ouvert_l').disabled=false;document.getElementById('ouvert_h').disabled=false;document.getElementById('menu_deroulant').disabled=true"/><label for="travail_catalogue">&nbsp;Piqûre catalogue</label> 
<br />
&nbsp;<input type="radio" value="Brochure" name="travail" id="travail_brochure" onclick="document.getElementById('ferme_l').disabled=false;document.getElementById('ferme_h').disabled=false;document.getElementById('ouvert_l').disabled=false;document.getElementById('ouvert_h').disabled=false;document.getElementById('menu_deroulant').disabled=true"/><label for="travail_brochure">&nbsp;Brochure</label> <br />
&nbsp;<input type="radio" value="Livre" name="travail" id="travail_livres" onclick="document.getElementById('ferme_l').disabled=false;document.getElementById('ferme_h').disabled=false;document.getElementById('ouvert_l').disabled=false;document.getElementById('ouvert_h').disabled=false;document.getElementById('menu_deroulant').disabled=true"/><label for="travail_livres">&nbsp;Livres</label> <br />
&nbsp;<input type="radio" value="dépliants" name="travail" id="travail_packaging" onclick="document.getElementById('ferme_l').disabled=false;document.getElementById('ferme_h').disabled=false;document.getElementById('ouvert_l').disabled=false;document.getElementById('ouvert_h').disabled=false;document.getElementById('menu_deroulant').disabled=true"/><label for="travail_packaging">&nbsp;Packaging </label><br />
&nbsp;<input type="radio" value="dépliants" name="travail" id="travail_autres" onclick="document.getElementById('ferme_l').disabled=false;document.getElementById('ferme_h').disabled=false;document.getElementById('ouvert_l').disabled=false;document.getElementById('ouvert_h').disabled=false;document.getElementById('menu_deroulant').disabled=true"/><label for="travail_autres">&nbsp;Autres : </label><input type="text" name="autre" size="35" />	
</td>
</tr>

Le truc que je ne veux pas en faite c'est qu'il y es un pseudo image quand je suis sur "sélectionner votre plie" ; je voudrai juste qu'il n'y es rien ^^" .
Sinon j'ai trouver mon erreur pour le reste corriger
Modifié par Rainarkan (21 Jan 2011 - 11:00)

Disons qu'on ne s'improvise pas développeur JavaScript, ou simplement intégrateur web avec (comme il se doit) des compétences en JavaScript et en DOM Scripting. Deux solutions:
- se former en commençant par les bases (avec un bon bouquin ou une série d'articles de fond comme celle-ci);
- engager quelqu'un qui soit déjà formé.

Remarques en passant:
- Les tableaux de mise en forme ça n'est pas catastrophique mais c'est bien de savoir faire sans (en 2011... ).
- Pense à utiliser l'élément LABEL (avec attribut for qui va bien) dans tes formulaires.
Modifié par Florent V. (21 Jan 2011 - 13:53)