Bonjour je n'arrive pas à faire (voir image plus vas) : un menu descendant. Qui pour chaque étapes fais descendre le rond. J'ai essayé avec différents wrappers, avec des jeux de before mais mon trait noir qui doit recouvrir le blanc ne veux pas se mettre cote a cote de ma ligne blanche... enfin je ne suis pas spécialiste dans le domaine et ça fait déjà 2h que je suis là dessus... Pourriez vous m'aider ?

Voici mon wrapper :

<div id="steps" data-current-step="0">
    <div class="content">
        <div data-step="0" class="active"><a>ENTRÉE</a></div>
        <div data-step="1"><a>PLAT</a></div>
        <div data-step="2"><a>DESSERT</a></div>
        <div data-step="3"><a>BOISSONS</a></div>
        <div data-step="-1"><a>TOUS</a></div>
    </div>
</div>

Le data-current-step prends comme valeur le data-step sélectionné et la classe active se place sur le div qui est actif (ça peux se placer sur le a, je pensais le faire pour placer le petit rond avec un before).

J'utilise aussi le moteur sass mais du simple css ça me va aussi je ferais la conversion

edit : voici mon sass si ça vous intéresse mais il ne contiens qu'un test uniquement (je n'arrive pas à faire chevaucher les 2 lignes pour chaque étapes).

#steps {
  border-left: 2px solid $text-color;
  margin-left: 20px;
  position: relative;
  > .content {
    display: inline-block;
    > div {
      padding: 10px 20px;
    }
  }
  &[data-current-step="0"] {
    > .content:before {
      content: ' ';
      display: inline-block;
      position: relative;
      height: 100px;
      width: 5px;
      background-color: red;
    }
  }
}

-
Edité par Alex??? 24 avril 2017 à 16:55:32