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

[curieuxmann]

Bonsoir,

J'aurais voulu savoir s'il était possible de faire des menus déroulants simples avec liens en (X)HTML pur ? (C'est à dire sans Javascript, etc. ?)

Par menus simples avec liens, j'entends ce type de menu déroulant :

Un menu que l'on déroule en cliquant sur ce type de bouton , ce qui provoque le déroulement d'une liste de liens, en fait comme dans l'image ci-dessous :



Puis en cliquant sur un lien des liens proposés,par exemple sur "grec", on arriverait sur une autre page html (grec.html par exemple), est-ce possible en (X)HTML pur ?


D'avance merci.

[FightTheWar]

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.

[curieuxmann]

Bonsoir,

Merci de votre aide.

Où et comment rajouter ce bouton submit ? (Mes pages sont en XHTML 1.0 avec CSS extérieur)

Par exemple dans le code ci-après, comment rajouter ce bonton "submit" ?

Code: Tout sélectionner

<div class="zone_langue">
    <div class="langue">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>
    </div>

De plus, mon code source ci-dessous est-il valide selon les normes du W3C, ou bien manque t-'il un ou plusieurs attributs pour pouvoir fonctionner et être valide ?


Encore merci

[François]

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: Tout sélectionner

var visible = false;

Un script qui change de classe selon la visiblité :

Code: Tout sélectionner

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

[curieuxmann]

En fait non, les liens contenus dans ce menu ne devront pas être indexés, donc je pense qu'il y a une autre piste en XHTML pur, mais je ne connais pas les éléments et attributs qu'il faut utiliser pour le faire fameux bouton "submit", quelqu'un aurait-il une idée ?

Mais je retiens ton idée pour l'avenir, au cas où.

[curieuxmann]

Pas d'idée

[StuWee]

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/

[François]

bonjour !

Sans JS du tout je ne voie pas !!!

Même ca :

Code: Tout sélectionner

<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 )
Désolé, pas d'autre idée

A+
François

[Davios]

J'aurais voulu savoir s'il était possible de faire des menus déroulants simples avec liens en (X)HTML pur ? (C'est à dire sans Javascript, etc. ?)

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.

[FightTheWar]

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: Tout sélectionner

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

[FightTheWar]

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: Tout sélectionner

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

[François]

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/

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

[curieuxmann]

Bonsoir,

Excellent l'exemple du menu déroulant du site OpenWeb.
Justement comment ont-ils fait pour faire ce menu accessible aux mal-voyants ?

En regardant leur code source pour ce menu, je ne vois que ça :

Code: Tout sélectionner

<div id="habillage">
<label for="set">Choisir un habillage&:</label>
  <select id="set" name="set"><option value="original" selected="selected">Normal</option><option value="fondnoir">Fond noir</option><option value="fondnoir_medium">Fond noir/gros caractères</option><option value="minimale">Minimal</option><option value="sanshabillage">Sans habillage</option></select>
  <input type="submit" value="Ok">
</div>


Et je suppose que les changements d'apparences sont en fait du aux CSS externers avec le sélecteur habillage placé dans chacune des différentes CSS dont on peut voir le nom et localisation dans l'entête du code source (entre <head> et </head>), à savoir :

Code: Tout sélectionner

    <link rel="stylesheet" type="text/css" href="/style/original/screen.css" media="screen" title="Normal" />
    <link rel="stylesheet" type="text/css" href="/style/original/print.css" media="print" title="Normal" />
    <link rel="alternate stylesheet" type="text/css" href="/style/fondnoir/screen.css" media="screen" title="Fond noir" />
    <link rel="alternate stylesheet" type="text/css" href="/style/fondnoir/print.css" media="print" title="Fond noir" />
    <link rel="alternate stylesheet" type="text/css" href="/style/fondnoir_medium/screen.css" media="screen" title="Fond noir/gros caract&res" />
    <link rel="alternate stylesheet" type="text/css" href="/style/fondnoir_medium/print.css" media="print" title="Fond noir/gros caract&res" />
    <link rel="alternate stylesheet" type="text/css" href="/style/minimale/screen.css" media="screen" title="Minimal" />
    <link rel="alternate stylesheet" type="text/css" href="/style/minimale/print.css" media="print" title="Minimal" />
    <link rel="alternate stylesheet" type="text/css" href="/style/sanshabillage/screen.css" media="screen" title="Sans habillage" />

    <link rel="alternate stylesheet" type="text/css" href="/style/sanshabillage/print.css" media="print" title="Sans habillage" />


Permettez-moi les remarques ci-dessous, car je ne comprends pas trop vos différentes explications :

Ou voit-on la présence de JS dans le code ci-dessous ? D'une page PHP externe ?


Est-il possible de faire la même chose avec mon menu déroulant, mais à la place de

Code: Tout sélectionner

<link rel="alternate stylesheet" type="text/css" href="/style/sanshabillage/print.css" media="print" title="Sans habillage" />

j'écrirais :

Code: Tout sélectionner

<link rel="là je ne sais pas ce qu'il faut écrire" type="text/html" href="allemand.html" media="print"* title="allemand" />

* cet attribut est optionnel, n'est-ce pas ? C'est un attribut en rapport avec l'impression sur une imprimante je suppose.


D'avance merci pour vos explications, et excusez-moi pour mon insistance, mais c'est important que pour moi, j'aimerais bien arriver à faire un menu comme celui de OpenWeb :

[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: Tout sélectionner

   <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: Tout sélectionner

   <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

[curieuxmann]

Dans ce cas, je suis partant pour un système avec une page PHP externe (?) appellée par l'élément FORM, mais je n'y connais toujours rien au language php !! Que faut-il écrire dans ce fichier php pour que quand l'on choisi allemand dans le menu dérlouant, et puis en cliquant sur OK, le navigateur pointe vers une autre page XHTML nommée allemand.html ? Etc pour les autres liens, (anglais = anglais.html, etc.)

Je pense que dans mes pages HTML, je peux garder ce type de code :

Code: Tout sélectionner

<div id="habillage">
<label for="set">Choisir un habillage&:</label>
  <select id="set" name="set"><option value="allemand" selected="selected">Allemand</option><option value="anglais">Anglais
ETC.
  <input type="submit" value="Ok">
</div>


Par contre, puis-je remplacer <div id="habillage"> par <div class="habillage"> ?


D'avance merci.