Navigation coulissante

[Hitoki]

Détails techniques

Version du forum : PunBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://deliquescencetest.forumactif.com/

Description du problème

Bonsoir à vous

C'est encore moi !

Après avoir réglé les onglets grâce à Lixyr et corriger le texte flottant grâce à un ami, je suis face à un autre problème.

J'aimerais pouvoir intégrer des liens dans une box qui agit en tant que parent et qui en hover, coulisse afin d'avoir l'apparition de cette boite. Elle partirait au clic. J'ai testé quelque chose mais ça ne fonctionne pas.

Pourriez vous m'aider ? ;o;

Je vous mets le codage et la page !

Le html de la boite

Code:

<div class="box_parent"><div class="bouton_navig">Navigation</div><div class="box_enfant">bllalblallalblalla</div></div>

Le css

Code:

 .bouton_navig {
  transform: rotate(90deg);
      background: #613839;
  border-bottom: 1px solid #c3a199;
      border-radius: 0 20xp 20px 0;
      color:  #ffffff;
          padding: 10px 10px;
          width: 70px;
      height: 20px;
        left: 0;
      top: 0;
      margin-left: -22px;
      margin-top: 280px;
      position: absolute;
      }
     
      .box_enfant {
      visibility: hidden;
      transform: 2s;
      width: 0; }
     
  .box_parent:hover .box_enfant  {
     
      background: #613839;
      height: 200px;
      transform: 2s;
      width: 250px;
      visibility: visible;
      }

Et là où le problème apparaît !

https://deliquescencetest.forumactif.com/h2-archanges

Encore merci pour votre précieuse aide !

[Toryudo]

Bonjour !

Je vais essayer de corriger le CSS à partir de ce que j'ai compris.
Pour le moment, la .box_enfant apparait bien, mais elle n'est pas positionnée là où vous l'imaginez : il faut mettre sa souris au niveau du haut du A de "Archange", en bas de la page, pour faire apparaitre le cadre. Pourquoi ? Parce que vous avez positionné le .bouton_navig plutôt que le .box_parent. En général, on préfère positionner le parent, puis les enfants par rapport au parent. Ce qu'on va commencer par faire, c'est donc positionner le .box_parent (et j'anticipe en mettant position fixed plutôt que position absolute, pour que la box suive le scrolling de la page) :

Code:

.box_parent {
  position: fixed;
  left: 0;
  bottom: 200px;
}

Ensuite, on n'aime pas particulièrement placer les éléments de 2 manières à la fois. Utiliser margin-left et left en même temps, c'est plus compliqué que d'en n'avoir qu'un seul, donc pour .bouton_navig, on regroupe les 4 en mettant :

Code:

.bouton_navig {
  right: -65px;
  bottom: 25px;
}

J'ai pris ces valeurs après quelques tests, elles me paraissent correctes niveau visuel, mais vous pourrez mettre ce que vous voulez ensuite. On utilise right plutôt que left pour que le bouton reste à droite, même quand la petite fenêtre .box_enfant apparaitra. N'oubliez pas de bien positionner vos éléments avant de commencer à les masquer et avant de commencer les transitions, c'est beaucoup plus simple dans cet ordre !

Maintenant, le fait que la fenêtre "coulisse". Vous avez utilisé "transform", mais transform permet de faire des opérations géométriques ; pour les animations, on utilise la propriété transition. Attention tout de même, transition ne fonctionne pas avec toutes les propriétés CSS, notamment visibility. On va plutôt utiliser opacity pour un effet d'apparition progressif. Enfin, on essaye de mettre les propriétés qui ne bougent pas dans l'élément qui n'est pas hover (donc le background passe sur le .box_enfant normal) et je trouve plus propre que ce soit uniquement le width qui bouge, le height restant fixe (goût personnel). Cela donne donc ceci :

Code:

.box_enfant {
   transition: all 2s;
   background: #613839;
   height: 200px;
   width: 0;
   opacity: 0;
}
.box_parent:hover .box_enfant {
   width: 250px;
   opacity: 1;
}

Et... voilà, les correctifs fonctionnent, la fenêtre apparait en transition lente, bien placée là où on veut qu'elle soit placée !
Et voilà le CSS final :

Code:

.box_parent {
   position: fixed;
   left: 0;
   bottom: 200px;
}
.bouton_navig {
   transform: rotate(90deg);
   background: #613839;
   border-bottom: 1px solid #c3a199;
   color: #ffffff;
   padding: 10px 10px;
   width: 70px;
   height: 20px;

   right: -65px;
   bottom: 25px;
   position: absolute;
}
.box_enfant {
   transition: all 2s;
   background: #613839;
   height: 200px;
   width: 0;
   opacity: 0;
}
.box_parent:hover .box_enfant {
   width: 250px;
   opacity: 1;
}

[Hitoki]

Bonjour à vous !

Oh, ça fonctionne **

Merci !

Le sujet est donc résolu !