Menu déroulant en (X)HTML pur avec liens, est-ce possible ?

[François]

Salut,

Là je laisse le soin aux spécialistes du Php de te répondre : je n'y connais rien !

A+
François

[Americas]

Voili... Voilà

Dans un post que Kmacleod a fermé ... je me demandais comment faire en sorte que Google voit mes liens dans un menu déroulant :

Le code était le suivant :

Dans le Head :

<script language="JavaScript">
<!--
function navigate(form)
{
var go = (form.menu.options[form.menu.selectedIndex].value);
document.location=go;
}
//-->
</script>

Dans le Body :

[color=green<FORM>
<SELECT NAME="menu" SIZE="1" onchange="navigate(this.form)">
<OPTION SELECTED VALUE="">Infos Voyageurs
<OPTION VALUE="http://www.toto.com/">toto
<OPTION VALUE="http://www.bidule.com/">bidule
</SELECT>
</FORM>[/color]

Menu déroulant simple avec javascript et que Google ne voit pas
La solution la plus simple aurait été de rajouter les liens en dur hors du formulaire... mais ça nuirait à la mise en page.

Alors, quitte à doubler les liens, autant le faire dans le menu déroulant

Ce qui donne :

[color=green<FORM>
<SELECT NAME="menu" SIZE="1" onchange="navigate(this.form)">
<OPTION SELECTED VALUE="">Infos Voyageurs
<OPTION VALUE="http://www.toto.com/"><a href="http://www.toto.com/">toto</a>
<OPTION VALUE="http://www.bidule.com/"><a href="http://www.bidule.com/">bidule</a>
</SELECT>
</FORM>[/color]

Et ça marche !!!

[curieuxmann]

Bonsoir,

Youpi yop !!! C'est exactement cela que je souhaitais !!!

Je vous remercie profondément pour aide !!

Et je vois qu'il n'y a rien de compliqué dans ce code, sauf la partie JavaScript pour moi car je ne maitrise malheuresement pas ce language.

Au fait, est-il possible de mettre le partie Javascript dans un fichier extérieur (comme pour les CSS's avec le <link rel="StyleSheet" type="text/css" href="ma_feuille_de_style.css" />) ?

Peut-être avec cette balise à placer dans l'entête du document entre les balises HEAD, non ?

Code: Tout sélectionner

<SCRIPT language="javascript" src="fichier.js"></SCRIPT>

Si je me souviens bien, je crois que cette balise est autorisé en XHTML 1.0 selon les recommandations du W3C.


D'ailleurs tous les agents-utilisateurs actuels supportent-ils bien le Javascript ? (Au moins les plus courant, à savoir Mozilla, Netscape, IE, Opera, etc.)



En tout cas c'est parfait, c'est vraiment ce type de truc que je recherchais, je vais tester ça cette fin de semaine, et je vous ferai part des mes remarques.


Bonne soirée.


EDIT (22:54'12'') :

Ah oui, j'avais oublié de vous demander si l'on pouvait faire la même chose mais en intégrant un bouton submit afin de faciliter la navigation au clavier ?

Code: Tout sélectionner

<input type="submit" value="Ok">

Voilà, voilà, j'attends vos remarques sur ce dernier point...


Bonne nuit

[FightTheWar]

Bonjour,

je croyais que tu voulais pas de javascript....

Sinon la solution que je t'ai proposée au début fonctionne très bien (sans javascript).

Oui tu peut mettre le javascript dans un fichier externe en y accedant comme dan ton exemple de code, mais si tu veux que ce soit valide XHTML il faut écrire les balises en minuscule.

Mais vu la simplicité du code mieux vaux l'intégré directement sur les balise. L'exemple donné par americas un un bon départ mais loin d'être valide XHTML (je crois que c'est ce que tu voulais).

[curieuxmann]

Bonjour,

Oui effectivement je souhaite avoir des pages valides XHTML, mais je ne savais que le code proposé par Americas n'était pas validable par le W3C, mais je veux aussi garder une accéssibilité maximale au clavier.


Le problème avec la méthode de FightTheWar, c'est la rédaction de la page PHP externe en lien avec ce menu déroulant avec bouton Submit, je ne sais pas utiliser le language de programmation PHP.
Je ne vois vraiment pas quelle syntaxe et propritétés utiliser pour créer cette page PHP.

Quelqu'un aurait-il un exemple d'une telle page PHP ?

[Americas]

Le code que je t'ai décris n'est certe pas conforme aux critères... mais si tu me trouves des sites bien placés dans google qui respecte tous les critères, tu me fais signe

Je crois qu'il faut savoir prendre quelques libertés pour débloquer certaines situations, du momment que les pages restent accessibles à la fois par les utilisiateurs et les robots

[George Abitbol]

Le code que je t'ai décris n'est certe pas conforme aux critères... mais si tu me trouves des sites bien placés dans google qui respecte tous les critères, tu me fais signe

Moi j'en connais au moins un

Fred

[curieuxmann]

Je suis bien d'accord avec toi, mais il aurait quand même été intéressant de voir un exemple de code php avec la méthode proposée par FightTheWar, non ?

[Americas]

Le code que je t'ai décris n'est certe pas conforme aux critères... mais si tu me trouves des sites bien placés dans google qui respecte tous les critères, tu me fais signe

Moi j'en connais au moins un

Fred

Le W3C ?

[George Abitbol]

Le W3C ?

Bon ben ça en fait 2, alors

Fred

[FightTheWar]

Bonjour,

américas > d'accord avec toi, les règles du w3c ne sont pas dorcement applicable à la lettre. Mais par rapport à ton exemple mettre les noms de balise en minuscule et fermé les balises je ne pense pas que ça change quoi que ce soit au positionnement google, ni même mettre une method sur le form.

curieuxmann > voici le code valide XHTML, sans javascript et complet (redirection PHP incluse) :

Code: Tout sélectionner

<form method="post" action="redirection.php" enctype="multipart/form-data" id="post">
<fieldset>
<legend>Sélectionnez une langue</legend>
<select name="langues" size="1">
<option>Toutes les langues</option>
<option value="allemand.html">allemand</option>
<option value="anglais.html">anglais</option>
<option value="arabe.html">arabe</option>
<option value="bulgare.html">bulgare</option>
<option value="catalan.html">catalan</option>
<option value="chinois_simplifie.html">chinois (simplifié)</option>
<option value="chinois_traditionnel.html">chinois (traditionnel)</option>
<option value="coreen.html">coréen</option>
<option value="danois.html">danois</option>
<option value="espagnol.html">espagnole</option>
<option value="estonien.html">estonien</option>
<option value="finnois.html">finnois</option>
<option value="francais.html">français</option>
<option value="grec.html">grec</option>
<option value="hollandais.html">hollandais</option>
<option value="hongrois.html">hongrois</option>
<option value="hébreu.html">indonésien</option>
</select>
<button id="submit" value="submit" type="submit">Ok</button>
</fieldset>
</form>


Ensuite il te faut créer une page redirection.php à placer dans le même repertoire avec comme contenu :

Code: Tout sélectionner

<?php
header("Location: ".$_POST['langues']);
?>


A toi de l'adapter selon tes besoins, j'espère que ça convient à tes attentes.

[Americas]

Bonjour,

américas > d'accord avec toi, les règles du w3c ne sont pas dorcement applicable à la lettre. Mais par rapport à ton exemple mettre les noms de balise en minuscule et fermé les balises je ne pense pas que ça change quoi que ce soit au positionnement google, ni même mettre une method sur le form.

Moi je donnais ce code uniquement pour un problème d'indexation et non de positionnement.

Je m'étais rendu compte qu'un menu déroulant classique n'étais pas vu par Google et que les pages contenus dans ce menu n'étaient pas indexées... alors il fallait trouver un moyen de les faire apparaître.

Mais il est clair que si je recherchais un meilleur positionnement sur ces pages... je placerais les liens autrement

[curieuxmann]

Bonsoir,

Faut-il toujours mettre le code php dans une feuille externe (ici redirection.php) ?
Edition : non !!! (j'ai lu un peu phpdébutant)

Ou bien puis-je l'intègrer directement dans ma page XHTML ? (Parce que juste pour une ligne de code, ce n'est peut-être pas la peine de créer une page externe)
Edition: oui !!!

Mais comment pour mon menu, je ne chez pas pour l'instant...


Par contre le ne vois pas pourquoi utiliser l'élément FIELDSET pour un formulaire ne contenant qu'un champ (ici Sélectionnez une langue).

[George Abitbol]

Faut-il toujours mettre le code php dans une feuille externe (ici redirection.php) ?
Edition : non !!! (j'ai lu un peu phpdébutant)

Ou bien puis-je l'intègrer directement dans ma page XHTML ? (Parce que juste pour une ligne de code, ce n'est peut-être pas la peine de créer une page externe)
Edition: oui !!!

Mais comment pour mon menu, je ne chez pas pour l'instant...

En fait ça revient plus ou moins au même, puisque de toute façon le nouveau fichier ne ferait qu'une ligne lui aussi... Si tu veux mettre ce code sur la page qui contient le menu, alors tu dois :

- faire pointer le formulaire sur cette même page (ou ne pas définir d'attribut action, puisque par défaut c'est la page en cours qui sera utilisée)
- rajouter un test pour savoir si le formulaire a été envoyé et le cas échéant faire la redirection (sinon la redirection se ferait dès le 1er chargement de la page)

Ce test pourrait ressembler à ça (en se basant sur le formulaire de FightTheWar) :

Code: Tout sélectionner

<?php
if ( (isset($_POST['langues'])) && ($_POST['langues'] != '') ) {
     header('Location: '.$_POST['langues']);
}
?>


Tu peux mettre ça n'importe où dans le document puisque de toute façon ce sera exécuté avant que la page ne soit envoyée au navigateur, mais bon, dans l'idéal, il vaut mieux le mettre tout en haut, tu t'y retrouveras plus facilement.

Fred

[curieuxmann]

Tu peux mettre ça n'importe où dans le document puisque de toute façon ce sera exécuté avant que la page ne soit envoyée au navigateur, mais bon, dans l'idéal, il vaut mieux le mettre tout en haut, tu t'y retrouveras plus facilement.

Peut-on même mettre ce code PHP entre les balises d'entête HEAD ?

Moi je donnais ce code uniquement pour un problème d'indexation et non de positionnement.

Et ne peut-on pas aussi rajouter l'élément A dans l'exemple de FightTheWar, afin de permettre l'indexation par Google des liens hypertextes, comme dans l'exemple ci-dessous :

Code: Tout sélectionner

<form method="post" action="" enctype="multipart/form-data" id="post">
<fieldset>
<legend>Sélectionnez une langue</legend>
<select name="langues" size="1">
<option>Toutes les langues</option>
<option value="allemand.html"><a href="allemand.htm">allemand</a></option>
<option value="anglais.html"><a href="anglais.html">anglais</a></option>
<option value="arabe.html"><a href="arabe.html">arabe</a></option>
<option value="bulgare.html"><a href="bulgare.html">bulgare</a></option>
[...]
</select>
<button id="submit" value="submit" type="submit">Ok</button>
</fieldset>
</form>

Ou bien ça ne marche pas avec du PHP ?