Un menu déroulant indexable...

[HawkEye]

Dans bien des cas, un menu déroulant (<select>) reste la plus évidente des méthodes de navigation. Le problème majeur étant que ce type de navigation ne réalise pas de liens, voici une très intéressante façon de contourner le problème

A voir sur Pink-SEO.com

[kanon90]

A l'époque où je cherchais une solution pour contourner le problème, on m'a conseillé de passer par du css, et le résultat n'est pas mal non plus !

[Madrileño]

Merci HawkEye et Marie.

[gwaradenn]

Merci, j'avais raté ça. ;)

[laurentg25]

Merci pour l'info HawkEye !

[jnj]

Pas mal du tout. effectivement, d'externaliser le javascript dans un fichier externe est une précaution élémentaire pour simplifier la maintenance.

perso, je préfère laisser le widget que le client a envie d'avoir et doubler le tout par un script PHP qui pose les liens en bas de page en liste ou en nuage. Autre avantage du script php, il permet de faire du PR scuplting sans avoir à se trimballer les trous des rel=nofollow qui désormais pompe du PageRank

[julienringard]

Pas mal néanmoins je préfère le CSS

[lesarbres]

pour éviter l'ouverture dans une nouvelles fenêtre : écrire
function ToUrl(m){window.location.assign(m);}
et à la fin du js :
else{bsel.setAttribute("onchange", "if(this.value != \'\'){window.location.assign(this.value)};");}

où "window.location.assign" remplace "window.open"

en revanche, n'étant pas doué en javascript je sèche sur un point :
j'aimerais mettre un style du genre :
<li><a href="index.php" style="background-color:...">
j'ai imaginé qqchose du genre :
blistvalue2 = blia[1];

et plus loin :
bopt[i].setAttribute("style", blistvalue2);

mais je ne sais pas finir l code correctement.

autre petit plus: afficher dans le menu déroulant la page en cours et non pas le premier de la liste (je l'ai fait en php mais en js, ne sais pas)

si qn a une idée, ce serait bien.

[pichonnat]

Un coup d'œil sur http://sebastien.pichonnat.ch/developpement/menu-deroulant-pour-site-web

C'est un menu déroulant qui utilise Mootools, son avantage est d'être basé sur les balise HTML UL et LI:

Code: Tout sélectionner

<ul id="nav">
  <li><a href="#" >Link 1</a></li>
  <li><a href="#" >Link 2</a>
  <ul>
    <li><a href="#" >Link3</a></li>
    <li><a href="#" >Link4</a></li>
  </ul>
  </li>
  <li><a href="#" >Link 5</a></li>
</ul>

Il peut se passer du Javascript et reste très réactif au moteur de recherche et reste complètement personnalisable avec les CSS ;-)

[lepadre]

Au réfractaires du javascript, rien n'empêche d'utiliser php et select comme ceci :

Code: Tout sélectionner

<form method="post" action="index.php" class="lemenuform" >
<select name="accesrapide">
<option value="pagedestination.php"><a href="pagedestination.php">Page destination</a></option>
</select>
<input  type="submit" value="valider" />
</form>


Et en en-tête de ma page index.php je positionne une redirection PHP de type header qui redirige moteurs et visiteurs sur l'URL choisie.

Code: Tout sélectionner

<?php
if (Isset ($_POST['accesrapide']) AND ($_POST['accesrapide'] != NULL))
   {
   $VARIABLE = $_POST['accesrapide'];
   header("Location: $VARIABLE");
   }
?>


Pas d'usage de javascript et personnalisation de liste via CSS.

[skyll]

Au réfractaires du javascript, rien n'empêche d'utiliser php et select comme ceci :

Code: Tout sélectionner

<form method="post" action="index.php" class="lemenuform" >
<select name="accesrapide">
<option value="pagedestination.php"><a href="pagedestination.php">Page destination</a></option>
</select>
<input  type="submit" value="valider" />
</form>


Et en en-tête de ma page index.php je positionne une redirection PHP de type header qui redirige moteurs et visiteurs sur l'URL choisie.

Code: Tout sélectionner

<?php
if (Isset ($_POST['accesrapide']) AND ($_POST['accesrapide'] != NULL))
   {
   $VARIABLE = $_POST['accesrapide'];
   header("Location: $VARIABLE");
   }
?>


Pas d'usage de javascript et personnalisation de liste via CSS.

non indexable dans ce cas là, ce qui n'est pas forcément le but recherché

[lepadre]

Au réfractaires du javascript, rien n'empêche d'utiliser php et select comme ceci :

Code: Tout sélectionner

<form method="post" action="index.php" class="lemenuform" >
<select name="accesrapide">
<option value="pagedestination.php"><a href="pagedestination.php">Page destination</a></option>
</select>
<input  type="submit" value="valider" />
</form>


Et en en-tête de ma page index.php je positionne une redirection PHP de type header qui redirige moteurs et visiteurs sur l'URL choisie.

Code: Tout sélectionner

<?php
if (Isset ($_POST['accesrapide']) AND ($_POST['accesrapide'] != NULL))
   {
   $VARIABLE = $_POST['accesrapide'];
   header("Location: $VARIABLE");
   }
?>


Pas d'usage de javascript et personnalisation de liste via CSS.

non indexable dans ce cas là, ce qui n'est pas forcément le but recherché

Au contraire, fortement indexable puisque la liste de liens est en html brut et la redirection est transparente pour google. La variable transposée n'est rien d'autre que l'url de destination. Avec le navigateur lynx ou en visionnant le cache google en version texte, Google voit les liens comme si ils étaient en dur.

[skyll]

Bon.. à tester alors ;-)
même si google à accès aux formulaires... je sais pas si il vas réellement interpreter le lien présent dans la valeur comme un lien....

[UsagiYojimbo]

Je suis du même avis que skyll. Un menu basé sur un select html c'est quand même pas le top. Et vu les possibilités du CSS, le plus logique est quand même d'utiliser du CSS et une structuration à base de ul li

[cedric_g]

C'est marrant parce que moi je recherche un script (si possible JQuery) me permettant de... ne pas "montrer" les liens à Google :D

Cas pratique : un menu déroulant avec +200 liens dans un header de page, et qui fait donc passer le contenu bien loin dans le code (boutique en ligne avec de multiples catégories, visibles par ailleurs je tiens à le préciser)

Autre solution envisagée : jouer comme un tordu avec les CSS pour faire passer le header... après le contenu dans le code (mais bon, quid de la compatibilité cross browser...)