Cette astuce est applicable à tous les sites tournant sur toutes les plateformes (Wordpress, Drupal, Joomla, html….)
Lorsque vous rédigez des articles à plusieurs chapitres, la fluidité entre les articles est importante car elle permet aux visiteurs de naviguer plus facilement et donc d’augmenter la probabilité de lecture de vos chapitres. Cette fluidité est également importante pour le référencement . La navigation peut se caractériser en une liste déroulante qui renvoie sur les autres pages par l’intermédiaire de liens. Vous pouvez voir un exemple de navigation soit sur le guide du référencement ou sur la liste des astuces wordpress. Ainsi vous pouvez voir dans ces deux exemples que toutes les pages sont liées entre elles par une liste déroulante à liens et également par des boutons permettant de retourner en arrière , de retourner au sommaire ou bien de passer à l’article suivant.
Comment créer une liste déroulante avec des liens ?
-
-
<form method="get" action="http://www.planeteduweb.com">
-
-
<select name="exemple"
-
onchange="window.open(this.options [this.selectedIndex].value)" >
-
-
<optgroup label="Le guide du référencement">
-
-
<option value="les-moteurs-de-recherche-et-les-annuaires">Chapitre 1 :</option>
-
-
<option value="choix-mots-cles-site-web">Chapitre 2 : </option>
-
-
<option value="le-choix-du-nom-de-domaine">Chapitre 3 :</option>
-
-
<option value="optimisez-votre-page-web">Chapitre 4 : </option>
-
-
</optgroup>
-
-
</select>
-
-
<input type="submit" value="Aller" />
-
-
</p>
-
</form>
Explications:
– Dans action mettez l’url de votre site.
– Pour la balise select name vous pouvez mettre ce que vous voulez comme valeur.
– La balise optgroup label sera le titre de votre liste déroulante.
– Dans option value il faut mettre l’adresse de la page sur laquelle vous voulez envoyer l’internaute.
Prenons mon exemple:
option value=les-moteurs-de-recherche-et-les-annuaires
Je souhaite renvoyer mes visiteurs sur la page des moteurs de recherche et des annuaires. Cette page se trouve à cette emplacement sur mon site:
http://www.planeteduweb.com/les-moteurs-de-recherche-et-les-annuaires
Etant donné que j’ai mis action=http://www.planeteduweb.com dans la form action je dois juste mettre la suite de l’URL dans option value pour envoyer mes visiteurs sur les moteurs de recherches.
Si vous essayez ce code vous vous rendrez compte que cette form occasionne l’ouverture de la page dans une nouvelle fenêtre. Si vous souhaitez que le lien s’ouvre sur la même fenêtre alors vous devrez remplacer:
-
-
<select name="exemple"
-
onchange="window.open(this.options [this.selectedIndex].value)" >
-
PAR
-
-
<select name="exemple"
-
onchange="document.location = ‘ ‘ + this.options [this.selectedIndex].value" >
-
Remarque importante :
Mes balises html sont sur plusieurs lignes car l’espace d’écriture ne me permet pas de le faire tenir sur une ligne. Si vous copiez ce code toutes les balises sur plusieurs lignes devront être mise sur une ligne.
Si vous rencontrez des problèmes utilisez les commentaires
6 commentaires »
Flux RSS des commentaires de cet article. Adresse web de rétrolien
J’ai insérer votre code html et suivi les instructions afin de faire une liste déroulante, mais quand j’essais d’accéder à la page bien je reçois ce message d’erreur:
Forbidden
You don’t have permission to access / on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
http://www.clubdebridgesocial-apra.org/sommaire
Comment faire pour réparer le problème?
Merci à l’avance,
Carmen
Commentaire par Carmen Ferlatte — 27 mars 2010 @ 5 h 24 min
J’ai trouvé mon erreur, mais le bouton ALLER, ne fonctionne toujours pas il envoi sur le message d’erreur.
Mais si je vais sur la date dans la liste déroulante, bien elle m’envoie à la bonne page.
Pouvez-vous m’aider à corriger le problème du bouton ALLER.
Merci
Commentaire par Carmen — 27 mars 2010 @ 6 h 55 min
Bonjour Carmen,
Le bouton aller est de type submit et renvoie à la form action, en l occurrence form method= »get » action= »http://www.planeteduweb.com ». Dans mon cas le bouton aller ne sert a rien puisque quand tu selectionnes un lien dans la liste déroulante tu es directement redirigé.
Aurélien
Commentaire par Aurélien — 27 mars 2010 @ 19 h 15 min
Je comprends; est-ce que ce serait possible que les liens soient aussi dirigés en cliquant sur le bouton Aller.
Parce que je dois aller sur un deuxième lien pour être redirigé et revenir pour aller sur le premier. Alors, j’ai changé le premier en mettant du texte.
Votre bouton Aller sur votre liste déroulante Astuce 4 fonctionne bien autant que votre redirection. J’aimerais que le mien soit pareil. Est-ce possible?
Merci et bonne journée
Carmen
Commentaire par Carmen — 27 mars 2010 @ 22 h 24 min
Bonsoir Carmen
Lorsque tu fais ton choix dans la liste déroulante, tu es redirigée automatiquement. En gros le bouton aller ne sert a rien puisqu il redirige sur la page où tu te trouves. A l origine le bouton allez sert si la liste deroulante ne redirige pas.
Aurélien
Commentaire par Aurélien — 31 mars 2010 @ 20 h 23 min
OK Merci beaucoup pour ton code, c’est très apprécier.
Carmen
Commentaire par Carmen — 14 avril 2010 @ 4 h 58 min