En gros l'internaute clique sur la liste déroulante qui sert de sommaire pour accéder aux diverses parties composant la page, il clique sur le titre correspondant au h2 de la partie en question et est directement redirigé sur cette partie, de la même manière qu'une encre, la différence ici c'est que ce n'est pas un lien mais une liste.
J'ai essayé de reprendre une partie du code mais ça n'a pas fonctionné, du coup j'ai refait une page à partir de zéro :
<html>
<head>
<title>test</title>
<style>
.cntr { text-align:center; }
</style>
</head>
<body>
<div class="cntr">
<label for="sommaire">A quel endroit de la page souhaitez-vous être redirigé ?</label>
<br/><br/>
<select name="sommaire" id="sommaire">
<option value="0">Sélectionnez...</option>
<option value="#part1">Sous-titre 1</option>
<option value="#part2">Sous-titre 2</option>
<option value="#part3">Sous-titre 3</option>
</select>
</div>
<h1>Titre</h1>
<h2 id="part1">sous-titre 1</h2>
<p>sous-titre de la partie 1</p>
<h2 id="part2">sous-titre 2</h2>
<p>sous-titre de la partie 2</p>
<h2 id="part3">sous-titre 3</h2>
<p>sous-titre de la partie 3</p>
</body>
</html>
J'aimerais savoir quoi mettre comme code pour faire en sorte que lorsqu'on clique sur un élément de la liste cela redirige vers l'encre correspondante.
Merci.
EDIT (car impossible de poster un nouveau message en dessous, il refuse systématiquement) :
réponse :
Bonjour à vous deux et merci pour vos réponses !
Quand j'ai mis l'exemple du site Frandroid, c'était pour donner une idée plus précise de ce que je voulais faire. Donc j'avais déjà regardé les solutions que vous préconisez, mais pour ma part j'aurais préféré une solution avec une vraie liste déroulante, car je ne suis pas sûr qu'en cas d'items trop nombreux dans une liste type "CSS" l'ensemble des items apparaîtraient (si ça déborde de la fenêtre il me semble que les items qui débordent ne se pas affichés et donc pas accessible pour l'utilisateur).
D'autant plus qu'avec une liste déroulante sur mobile ça donne un effet qui serait particulièrement intéressant et mieux qu'une liste CSS qui déborderait vite et empêcherait de cliquer sur les items les plus éloignés :
https://ibb.co/tJ8yPXH
J'avais déjà fait des recherches et j'étais tombé sur un site qui expliquait qu'il était possible de bidouiller un truc en js pour que ça fonctionne, mais je n'arrive plus à mettre la main sur le lien du site en question.
Pensez-vous qu'il soit nécessaire de passer par un "truc CSS" ? N'est-il pas possible de faire un js qui permettrait de rediriger l'internaute sur la section sélectionnée dans la liste déroulante ?
A mon sens, même si cela se comporte comme tel, ce n'est pas vraiment un <select>, mais un "truc" CSS, dans le même genre des "dropdowns" de Bootstrap, avec une ouverture au :hover. Ce qui mène aux sections, ce sont de simples liens vers des #ancres.
Tu pourrais inspecter le code sur la page que tu fournis en exemple pour voir comment tout ça s'articule.
plus qu'un truc CSS avec du hover (ce qui est valide) je suggère un "disclosure widget", avec un peu de JS et surtout des attributs aria bien propres pour indiquer que c'est ouvert ou non. Un peu de lecture en anglais (ne t'arrête pas au premier exemple, et il y a un bout de code pour t'aiguiller) : Disclosure widgets chez Adrian Roselli.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Quand j'ai mis l'exemple du site Frandroid, c'était pour donner une idée plus précise de ce que je voulais faire. Donc j'avais déjà regardé les solutions que vous préconisez, mais pour ma part j'aurais préféré une solution avec une vraie liste déroulante, car je ne suis pas sûr qu'en cas d'items trop nombreux dans une liste type "CSS" l'ensemble des items apparaîtraient (si ça déborde de la fenêtre il me semble que les items qui débordent ne se pas affichés et donc pas accessible pour l'utilisateur).
D'autant plus qu'avec une liste déroulante sur mobile ça donne un effet qui serait particulièrement intéressant et mieux qu'une liste CSS qui déborderait vite et empêcherait de cliquer sur les items les plus éloignés :
https://ibb.co/tJ8yPXH
J'avais déjà fait des recherches et j'étais tombé sur un site qui expliquait qu'il était possible de bidouiller un truc en js pour que ça fonctionne, mais je n'arrive plus à mettre la main sur le lien du site en question.
Pensez-vous qu'il soit nécessaire de passer par un "truc CSS" ? N'est-il pas possible de faire un js qui permettrait de rediriger l'internaute sur la section sélectionnée dans la liste déroulante ?
Il semblerait que cela soit dans l'esprit de ce que je veux faire (même si j'avoue j'aurais préféré des URL relatives plutôt que des URL absolues qui vont m'obliger à changer le code si jamais le site change d'adresse)
Du coup j'ai tenté quelque chose (je précise que je ne touche absolument pas en JS) :
<html>
<head>
<title>test</title>
<style>
.cntr { text-align:center; }
</style>
<script>
function redirect(goto){
var selectEl = document.getElementById('sommaire');
selectEl.onchange = function(){
var goto = this.value;
redirect(goto);
};
</script>
</head>
<body>
<div class="cntr">
<h1>Titre</h1>
<label for="sommaire">Sur quel site souhaitez-vous être redirigé ?</label>
<br/><br/>
<select name="sommaire" id="sommaire">
<option value="">Sélectionnez...</option>
<option value="https://google.fr">Google</option>
<option value="https://duckduckgo.com/">DuckDuckGo</option>
<option value="https://yahoo.fr">Yahoo</option>
</select>
</div>
Mais bien entendu ça ne fonctionne pas (et je ne comprends pas d'où vient le problème)
Il y a forcément quelque chose que j'ai loupé dans le code, et probablement un meilleur code qui permettrait d'avoir des URL relatives (directement les ancres) à la place des URL absolues.
Il manque toute la fonction goto, notamment l'action véritable, le window.location Relis le code que tu as vu sur StackOverflow.
Une fois que c'est fait, essaie avec juste le #part1, #part2, etc. Je ne sais plus si window.location permet d'utiliser juste le hash.
Et du coup, oui, ça correspond à ce que tu veux, mais sémantiquement ce n'est pas extra Je comprends ta remarque sur la version mobile qui transforme automatiquement le select, et c'est une remarque valide, mais je pense que ça serait plus propre d'utiliser autre chose qu'un élément de formulaire et de le styler différemment suivant les tailles de fenêtre au besoin.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Ta bienveillance m'a permis de corriger cette erreur !
Maintenant ça fonctionne, même juste avec l'ancre c'est fonctionnel !
EDIT: suppression du code, sans quoi le message est bloqué
Oui je comprends que ce ne soit pas top top, maintenant c'est pour un projet qui doit être fait rapidement, donc je m'en contenterai pour le moment, et ensuite je ferais quelque chose de plus propre quand j'aurai le temps
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Sommaire via une liste déroulante
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)