5545 sujets

Sémantique web et HTML

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... Smiley cligne
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 ...
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é.

Le but du forum n'est pas de faire le travail à ta place mais de te donner des pistes pour y arriver. Nous t'avons aiguillé, mamax et moi vers des tutos de menus qui pourraient t'aider à trouver une solution.
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». Smiley cligne

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...
Merci à toi ; oui j'aurai du préciser que c'était la partie central . Mais bon comme j'ai mit liste déroulante dans le menu j'aurai penser qu'on m'aurai comprise ^^" .

Non ; très peu de Javascript à vrai dire je m'y suis mit pour ce projet j'en ai pas fait avant
Les seuls trucs connue sont le "onchange() &' onclick()".

Et même chercher sur internet je comprends pas comment faire ...
Mais j'ai peut être trouver quelques choses sous onchange() ... Mais sa marche pas très bien ...
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 Smiley smile
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... Smiley cligne ).
- Pense à utiliser l'élément LABEL (avec attribut for qui va bien) dans tes formulaires.
Modifié par Florent V. (21 Jan 2011 - 13:53)
Sujet clos
Aller à