Messages: 18187

Enregistré le: 23 Fév 2004

Message le Mar Juin 09, 2009 10:40

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

A voir sur Pink-SEO.com ;)
Haut
26 Réponses
Messages: 940

Enregistré le: 23 Mar 2007

Message le Mar Juin 09, 2009 10:53

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 !
Haut
Messages: 37923

Enregistré le: 7 Juil 2004

Message le Mar Juin 09, 2009 18:36

Merci HawkEye et Marie. :)
Haut
Messages: 319

Enregistré le: 22 Jan 2006

Message le Mer Juin 24, 2009 17:12

Merci, j'avais raté ça. ;)
Haut
Messages: 240

Enregistré le: 22 Sep 2005

Message le Mar Juin 30, 2009 23:58

Merci pour l'info HawkEye !
Haut
Messages: 23

Enregistré le: 25 Juil 2007

Message le Mar Juil 21, 2009 21:19

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
Haut
Messages: 210

Enregistré le: 13 Juil 2009

Message le Jeu Juil 23, 2009 14:45

Pas mal néanmoins je préfère le CSS
Haut
Messages: 8

Enregistré le: 24 Oct 2003

Message le Jeu Juil 23, 2009 23:50

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.
Haut
Messages: 0

Enregistré le: 28 Juil 2009

Message le Mar Juil 28, 2009 10:27

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 ;-)
Haut
Messages: 149

Enregistré le: 5 Mar 2009

Message le Mar Juil 28, 2009 11:00

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.
Haut
Messages: 1366

Enregistré le: 14 Oct 2005

Message le Mar Juil 28, 2009 12:09

lepadre a écrit: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é
Haut
Messages: 149

Enregistré le: 5 Mar 2009

Message le Mar Juil 28, 2009 14:21

skyll a écrit:
lepadre a écrit: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.
Haut
Messages: 1366

Enregistré le: 14 Oct 2005

Message le Mar Juil 28, 2009 14:37

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....
Haut
Messages: 12242

Enregistré le: 23 Nov 2005

Message le Mar Juil 28, 2009 14:55

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
Haut
Messages: 3620

Enregistré le: 18 Jan 2006

Message le Mar Juil 28, 2009 16:19

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...)
Haut
Messages: 880

Enregistré le: 1 Aoû 2004

Message le Mar Aoû 11, 2009 18:46

Je passe également par du CSS et je pense que le résultat est plutôt correct, les liens étant bien interprêtés par Google.
Exemple ici: http://www.web-ig.com/formation/

Faudrait juste que je me trouve quelque chose qui soit plus pratique pour dérouler/enrouler les "menus". Enfin j'avoue ne pas trop m'être cassé la tête avec ca.
Haut
Messages: 23075

Enregistré le: 19 Avr 2002

Message le Mar Aoû 11, 2009 19:08

cybervince a écrit:Je passe également par du CSS et je pense que le résultat est plutôt correct, les liens étant bien interprêtés par Google.
Exemple ici: http://www.web-ig.com/formation/

Faudrait juste que je me trouve quelque chose qui soit plus pratique pour dérouler/enrouler les "menus". Enfin j'avoue ne pas trop m'être cassé la tête avec ca.

au niveau design, ton menu et tes encadrés me semblent largement inspirés de la version précédente de WRI... mais c'est une autre histoire :roll:
Haut
Messages: 1366

Enregistré le: 14 Oct 2005

Message le Mar Aoû 11, 2009 22:51

cybervince a écrit:Faudrait juste que je me trouve quelque chose qui soit plus pratique pour dérouler/enrouler les "menus". Enfin j'avoue ne pas trop m'être cassé la tête avec ca.


faudrais commencer par vérifier l'affichage sous IE,
ca bug un peu côté droit :-)
Haut
Messages: 247

Enregistré le: 9 Fév 2008

Message le Ven Aoû 21, 2009 3:52

C'est soulant parfois le CSS... Si on l'optimise pour Firefox y'a beaucoup de chance que ça plante pour IE...

On es jamais sur que ça fonctionne avec tous les navigateurs :s
Haut
Messages: 14

Enregistré le: 29 Jan 2008

Message le Ven Nov 13, 2009 12:17

Bonjour à tous, j'utilise ce script sur mon site mais je cherche désespérément à imposer un width à mon select, si quelqu'un a une idée, merci d'avance
Haut
Messages: 3620

Enregistré le: 18 Jan 2006

Message le Mar Nov 17, 2009 10:51

WebRankInfo a écrit:
cybervince a écrit:Je passe également par du CSS et je pense que le résultat est plutôt correct, les liens étant bien interprêtés par Google.
Exemple ici: http://www.web-ig.com/formation/

Faudrait juste que je me trouve quelque chose qui soit plus pratique pour dérouler/enrouler les "menus". Enfin j'avoue ne pas trop m'être cassé la tête avec ca.

au niveau design, ton menu et tes encadrés me semblent largement inspirés de la version précédente de WRI... mais c'est une autre histoire :roll:


C'est le moins que l'on puisse dire !
Haut
Messages: 270

Enregistré le: 18 Déc 2006

Message le Dim Nov 22, 2009 19:42

C'est vrai que quand on c'est que l'on peu maintenant simulé un menu déroulant qui à la gueule qu'on veux sans même avoir recours à du javascript en jouant simplement avec les propriété de css, je pense que c'est bien plus intéressant que d'essayer de rendre indexable un menu déroulant type select.
Haut
Messages: 9

Enregistré le: 14 Mai 2007

Message le Sam Fév 13, 2010 1:59

Bien pratique ce petit script ... et facile a mettre en place avec ca, merci :-)
Haut
Messages: 85

Enregistré le: 7 Mar 2012

Message le Lun Aoû 06, 2012 12:11

Je remonte le sujet étant donné les mises à jour importantes de l'algo de Google depuis les dernières réponses.

Est-ce que vous pensez que l'AJAX (et plus particulièrement la solution de Pink-SEO) est toujours une bonne solution pour aider à référencer un menu select ? Pas trop de risques avec Penguin et le cloaking ? L'inconvénient aussi, c'est que ça ne fonctionne pas sur IE6 et IE7 (enfin du coup on applique pas l'AJAX sur ces navigateurs et on garde l'apparence de base).

Sinon y'a la solution de mettre le menu en dur dans une balise <noscript> juste après le select. Ça permet d'avoir un bon rendu même sur IE6 et IE7. Peut être plus "propre" pour Google. Mais la transmission du jus doit être un peu moins bonne dans un <noscript>, non ?
Haut
Messages: 8506

Enregistré le: 14 Mai 2003

Message le Lun Aoû 06, 2012 12:40

@Lindy: une autre technique: http://www.redemption.se/other-means-of-selection/
Haut
Messages: 85

Enregistré le: 7 Mar 2012

Message le Lun Aoû 06, 2012 13:59

C'est parfait spout, merci beaucoup !
Haut
Messages: 18372

Enregistré le: 5 Juin 2006

Message le Mar Juil 01, 2014 16:03

Babillage ressorti des abîmes par un flood
Haut
Messages: 40

Enregistré le: 13 Sep 2003

Message le Sam Juil 15, 2017 17:04

julienringard a écrit:Pas mal néanmoins je préfère le CSS

J'ai un faible aussi pour cette méthode qui est claire.
Haut