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

Bonjour,

je ne crois pas que ce soit possible car il faut gérer des événements.

Mais tu peux t'en sortir avec un javascript très limité, ou si tu tiens vraiment à ne pas avoir de javascript, tu mets un bouton submit à côté. Ce qui soit dit en passant permet l'accessibilité aux mal voyant.

Fight.

 

Bonsoir,

Je suppose que tu veux que les robots puissent indexer tes lien ainsi créés ?

Dans ce cas je ne suis pas sûr que ca marche.
En revanche en DHTML tu dois pouvoir le faire avec un bloc comportant les liens et un bouton :

deux classes pour le DIV 1 visible l'autre non
une variable JS visible oui / non,

Code:

var visible = false;

Un script qui change de classe selon la visiblité :

Code:

function affHide ( aBloc ){
  visible = not visible;
  if visible 
 {
    aBloc.className = maclassevisible;
  }
  else {
    aBloc.className = maclasseinvisible;
  }
}

sur onClick du bouton et des liens affHide ( tonBlock )

J'ai jamais essayé, y a surement à ameliorer, mais c'est une piste !

A+
François

 

bien sur ke c'est possible

un exemple ici : http://www.alsacreations.com/articles/a ... antcss.htm
et le tuto correspondant : http://www.alsacreations.com/articles/affiche/

 

bonjour !

Sans JS du tout je ne voie pas !!!

Même ca :

Code:

<SELECT NAME="Lien" SIZE="1" onchange="window.location.href=this.value">
<option value="allemand.html>allemand</option>

Ca marche mais c'est du javascript !
(modifié : ca marchait pas avec IE :lol: )
Désolé, pas d'autre idée

A+
François

 

Re: Menu déroulant en (X)HTML pur avec liens, est-ce possibl

Juste une question, pourquoi tu ne veux absolument pas de JS pour faire ce menu, d'autant plus qu'à peu près ... disons ... 100% des navigateurs le comprendraient tellement le code serait extrêmement simple.

Sinon pour ce qui est du XHTML 1.0, il n'y a aucune restriction vis à vis du javascript, tu peux parfaitement mettre du JS dans ta page et être totalement compatible XHTML.

 

Bonjour,

Il faut mettre ton select dans un form (onligatoire de toute façon pour être valide il me semble) ensuite tu rajoute un bouton submit (ou autre élément submit), ce qui donnerait :

Code:

<div class="zone_langue">
    <div class="langue">
      <form method="post" action="mapage.php" enctype="multipart/form-data" id="post">
      Sélectionnez une langue
     <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">
     </form>
    </div>

Il ne te reste plus qu'à analyser le formulaire dans "mapage.php" pour faire la bonne redirection, ou le bon include.

Mais comme dis plus haut le plus simple reste quand même est un petit javascript.

 

P.S : voici un bon exemple avec une bonne raison de ne pas utiliser de javascript sur le onchange :
http://www.openweb.eu.org/humeurs/pan_doigts/

Sinon j'ai oublié de fermer la balise button :

Code:

<button id="submit" value="submit" type="submit" />

 

Non, pas d'accord avec eux, ca marche au clavier avec IE et Mozilla : on peut faire ce qu'on veut, il n'y a que sur changement effectif de la valeur du "Select" que l'évènement est déclenché ! Sur d'autre navigateurs je n'ais pas essayé.

Par contre, en effet, pas d'idexation des moteurs, mais curieuxman avait dit que ce n'était pas nécessaire. Sinon la solution avec un bloc "DIV" doit fonctionner et sera indexable.

Remarque : pas besoin de "Form" à priori, à moins que ce ne soit pas la norme, en tout cas pas de bouton submit.

A+
François

 

Pour OpenWeb :

Le FORM appelle un Fichier php avec comme paramètre le nom du thème,
le php change la feuille CSS par défaut :
avant

Code:

   <link rel="stylesheet" type="text/css" href="/style/[b]origina[/b]l/screen.css" media="screen" title="Normal" />
    <link rel="stylesheet" type="text/css" href="/style/[b]original[/b]/print.css" media="print" title="Normal" />
    <link rel="alternate stylesheet" type="text/css" href="/style/fondnoir/screen.css" media="screen" title="Fond noir" />

après :

Code:

   <link rel="stylesheet" type="text/css" href="/style/[b]fondnoir[/b]/screen.css" media="screen" title="Fond noir" />
    <link rel="stylesheet" type="text/css" href="/style/[b]fondnoir[/b]/print.css" media="print" title="Fond noir" />
    <link rel="alternate stylesheet" type="text/css" href="/style/original/screen.css" media="screen" title="Normal" />

Chaque cas est différent,dans l'exemple que je te donne y a du JS eux non.
tu peux aussi transmettre l'URL en paramètre, comme eux, à un script php, asp, dll.. qui fera une redirection.Sinon il faut changer "window.location.href" et c'est du JS, même avec un bouton Submit si c'est plus propre que d'utiliser l'évènement.

Si quelqu'un d'autre à une idée ?

A propos, je corrige ce que j'ai dis tout à l'heure au sujet de 'OnChange' : si la liste est fermée et qu'on utilise les flèches, effectivement ca déclenche ! donc le Submit semble nécessaire.

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

 

Voili... Voilà

Dans un post que Kmacleod a fermé :wink: ... 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 :

Dans le Body :

Menu déroulant simple avec javascript et que Google ne voit pas :roll:
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 :idea:

Ce qui donne :

Et ça marche !!!

 

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).

 

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 :lol:

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 :wink:

 

Moi j'en connais au moins un

Fred

 

Le W3C ? :wink:

 

Bon ben ça en fait 2, alors

Fred

 

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:

<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:

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

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

 

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 :wink:

 

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:

<?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

 

Je te l'ai dit, tu peux le mettre n'importe où. Pour la simple et bonne raison que la redirection se fera en premier, le code HTML ne sera jamais affiché dans le navigateur, et la notion même de HEAD ou de BODY n'a plus aucun sens. C'est une redirection faite côté serveur, la page pourrait ne contenir que le header() ou bien contenir 8 000 lignes de code HTML derrière, devant, ou autour, ça ne changerait strictement rien, ce code ne serait jamais envoyé au navigateur, à l'internaute ou au robot.

PHP n'a rien à voir ici, mais ce code n'est tout simplement pas valide (pas de A dans une OPTION)

Si tu veux que les moteurs indexent ces liens, il te suffit de faire une page plan du site, ou bien d'ajouter ces liens en dur en bas de ton document.

Fred

 

Pour revenir à la toute première question, il est possible de faire un menu déroulant en HTML et CSS.

Si tu prends le code source de mon site (voir le WWW) tu auras un exemple.

Sinon tu cherches sur Googles ;-) : menu CSS HTML

 

Ceci n'empêchera pas de sélectionner l'option, mais effectivement aucune redirection n'aura lieu (avec mon bout de code, en tous cas). Ce qui ne change rien du tout en fait, puisque de toute façon il faudra recharger la page via le formulaire.

- option avec value de la page courante = redirection vers la page courante (donc on ne bouge pas)
- option sans value = pas de redirection, on reste sur la page courante (donc on ne bouge pas)

Complètement valide. D'ailleurs, je ne sais pas si tu sais, mais il existe un validateur, ça te permettra de répondre toi-même à ce genre de questions (même pas besoin de mettre le fichier en ligne, ça marche aussi sur un fichier local).

Seulement là encore ce n'est pas parce que l'option est grise qu'elle sera non-sélectionnable. Le plus simple serait de ne pas l'afficher, non ?

Fred

 

Ca veut dire que ton serveur n'est pas configuré pour autoriser la méthode POST sur les fichiers .html. De toute manière, puisque tu comptes utiliser du PHP dessus, ce fichier doit donc être un fichier PHP et pas un fichier HTML

Si tu ne veux pas toucher à ce fichier, envoie les données du formulaire sur un fichier php.

Fred

 

Bonjour, ceci est le premier message d'un débutant.
J'enseigne trois disciplines dans un lycée et j'aimerais insérer un menu déroulant avec lien ( sans exigence particulière sur HTML pur ou non ) pour permettre à mes élèves d'être dirigés directement sur la page qui les concerne spécifiquement.

Voici le code proposé, basé sur les réponses trouvées plus haut dans cette discussion:


<div class="disciplines">
<form method="post" action="mapage.php" enctype="multipart/form-data" id="post"> <select name="disciplines" size="1">
<option value="Maths.html">Maths</option>
<option value="Physics.html">Physics</option>
<option value="Tc.html">TC</option>
</select><button id="submit" value="submit" type="submit">
</form>
</div>


questions:

Si j'ai bien compris, ce code envoie le choix d'option dans "mapage.php"
Comment récupérer cette information ?
Peut-on la récupérer facilement sans connaissance de php ? si oui comment ?
Ne peut-on pas bricoler directement une URL à partir de : options values="choix.html" ?

merci d'avance.