menu déroulant horizontalement

9 août 2018 à 18:29:29

Bonjour,
j'aimerai créer un menu déroulant horizontalement assez particulier en utilisant seulement du html et css (si possible) mais je ne sais pas comment m'y prendre.

Le fonctionnement de mon projet ressemble énormément à la sélection de skins dans League of Legends (voir image).

J'ai plus de 20 div à faire défiler horizontalement, mais seulement 5 seront toujours visibles dont celle du milieu qui sera toujours plus grande que les autres. Il y aura deux flèches pour faire défiler les div vers la droite et vers la gauche. Si on regarde mon image, imaginons que je clique sur la div 3, celle ci s'affichera directement au milieu. Les div affichées passeront de : 22 - 23 - 1(plus grande) - 2 - 3 à : 1 - 2 - 3(plus grande) - 4 - 5 et bien sur si j'utilise les flèches, les div défileront l'une après l'autre.

Malheureusement, ce n'est pas tout, sur la page il y à un bouton qui doit envoyer vers une autre page qui diffère selon la div affichée au milieu.

j’espère avoir été clair, et que quelqu'un pourra m'aider :D

Cordialement.

ChrisLebure

9 août 2018 à 18:50:24

Bonjour,

En fait ce n'est pas un menu, mais un slider ou carousel avec 5 images de front
Cherche "carousel multiple slides" dans un moteur de recherche

Ensuite pour récupérer la div centrale, je ne vois que Javascript

Thibault Delattre

9 août 2018 à 20:21:17

En effet merci je me rapproche du but. J'ai trouvé ça : https://codepen.io/mahmoudzohdi/pen/WrOJPv

il faudrait juste qu'a la place de l’aperçu ce soit un lien ou un bouton qui me redirigerait vers une autre page selon la photo au centre. C'est possible ?

Il y a du javascript par contre, et là par contre je ne connais pas