Liens dans des listes déroulantes liées

Fermé
keveuro Messages postés 2 Date d'inscription mercredi 29 avril 2015 Statut Membre Dernière intervention 29 avril 2015 - Modifié par keveuro le 29/04/2015 à 09:53
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 29 avril 2015 à 18:33
Bonjour à tous,

Alors je suis en train de faire mon premier site web en HTML, et pour être franc avec tout le monde j'ai aucune réelle notion du langage CSS ou javascript... je m'inspire de ce que je trouve sur internet comme réponse pour développer la construction de mon site. Sauf que la je suis bloqué pour mettre un lien sur une liste déroulante liée.
Mon but c'est lorsque l'on sélectionne un élément de la seconde liste déroulante on soit redirigé vers une page .html


Cela sera peut etre plus clair pour certains si je le mets sous cette forme :

<form>
<table>
<tbody>
<tr><th>Opérateurs :</th><th>Forfaits :</th></tr>
<tr>
<td><select name="Rubrique" onchange="Choix(this.form)">
<option>--- Choisissez un opérateur ---</option>
<option>SFR</option>
<option>Orange</option>
<option>Virgin Mobile</option>
<option>La Poste Mobile</option>
</select></td>
<td><select name="Page">
<option>--- Choisissez un forfait ---</option>
</select></td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
</form>
<script type="text/javascript">// <![CDATA[
function Choix(form) {
i = form.Rubrique.selectedIndex;
if (i == 0) {

form.Page.innerHTML="<option></option>";
form.Page.options[0].text="--- Choisissez une page ---";
return;
}
form.Page.selectedIndex = 0;
switch (i) {
case 1 : var txt = new Array ('2H 100 Mo','2h 1 Go','24/24 1 Go','24/24 5 Go','24/24 10 Go','24/24 15 Go','24/24 20 Go'); break;
case 2 : var txt = new Array ('M6 Mobile 2H 50Mo','M6 Mobile 2H 1Go','Origami Zen 24/24 500Mo','Origami Zen 24/24 2Go','Origami Play 24/24 3Go','Origami Play 24/24 7Go','Origami Jet Pack Europe 12 Mois','Origami Jet Pack Europe 24 Mois','Origami Jet Pack Premier 12 Mois','Origami Jet Pack Premier 24 Mois'); break;
case 3 : var txt = new Array ('3H 200 Mo','3H 2 Go','3H 6 Go','24/24 200 Mo','24/24 2 Go','24/24 6 Go'); break;
case 4 : var txt = new Array ('3H 12 Mois', '3H 24 Mois', '3H bloqué 12 Mois', '3H bloqué 24 Mois', '24/24 500Mo 12 Mois', '24/24 500Mo 24 Mois', '24/24 2Go 12 Mois', '24/24 2Go 24 Mois', '24/24 5Go 12 Mois', '24/24 5Go 24 Mois'); break;
}
form.Page.innerHTML="<option></option>";
form.Page.options[0].text="--- Choisissez une page ---";
for (i=0;i<txt.length;i++) {
form.Page.appendChild(document.createElement("option"));
form.Page.options[i+1].text=txt[i];
}
}


Et je souhaite que chacun des éléments sélectionnés nous redirige automatiquement vers une page .html

J'espère avoir été assez clair dans mon explication, si besoin est je peux apporter un complément d'information.

Merci par avance.

1 réponse

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 29/04/2015 à 15:22
Bonjour

un menu deroulant ne se fait pas avec un formulaire et des select
le rôle d'un formulaire c'est de récupérer les informations saisies et de soit : envoyer un mail, remplir une base de donnée, afficher un résultat, mais pas de faire un menu de navigation

cela se fait avec html et css (et javascript ou jquery pour plus d'effets)
un tuto de menu déroulant
http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php

Donc tu pourrais faire un menu avec 4 rubriques
SFR - orange - Virgin - La poste
et en sous menu de chaque rubrique les différents abonnements en te basant sur le tuto

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
0
keveuro Messages postés 2 Date d'inscription mercredi 29 avril 2015 Statut Membre Dernière intervention 29 avril 2015
29 avril 2015 à 15:45
Bonjour Animostab,

Dans un premier, un grand merci, c'est vrai que çà à l'air beaucoup plus simple sous cette forme :)

Autre chose, en fait je souhaitais m'inspirer de ce code ( http://vvaquin.chez-alice.fr/html/Guides-tutoriaux/coursDeJavascript/js_liens.html ) pour interférer dans mes listes déroulantes liées, et justement intégrer un lien .html par la suite.
Est-ce possible ?
Car sous forme de menu déroulant cela s'afficherait sous toutes les pages de mon site, non ? Hors ce n'est pas le but.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
29 avril 2015 à 18:33
C'est possible mais pas du tout recommandé car niveau réferencement c'est = zéro. Pas de possibilité de mettre en forme avec css. Pas du tout valide.
sous forme de menu déroulant html / css ca sera uniquement dans les pages ou tu mettra le code html du menu
Evite aussi de t'inspirer de sites qui datent de mathusalem (waquin) et qui sont totalement obsolètes (fait avec des frames ...... obsolète / beurk)
ex
"Les tableaux permettent de contrôler efficacement la mise en page d'un document HTML."
faux ! --> les tableaux servent à afficher des données tabulaires, c'est css qui sert a controler la mise en page !
etc ....
Un bon site pour apprendre html css
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
0