Barre de navigation avec effet au vol

[MlleSnake]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement

Description du problème

Bonjour !
J'ai codé sur codepen une barre de navigation que je souhaitais mettre en place sur mon forum. Toutefois, je n'avais pas pris en compte que les liens de la barre de navigation dans les templates FA sont fusionnés sous une seule variable, image y comprise. J'ai fait quelques tentatives de recréer l'effet désiré en essayant d'isoler l'image du texte ou en ajoutant un élément :before dans mon css, mais cela n'a pas été fructueux, malheureusement.. du coup j'aurais bien besoin d'un petit coup de pouce !

Je veux que les liens de navigation soient représentés par une icon et qu'au survol, le texte approprié (messagerie, connexion, membres...) s'affiche à côté. Vous pouvez voir la barre de navigation (non fonctionnelle) tout au haut de mon forum test pour comprendre ce que j'essaie de faire.

Merci beaucoup !

HTML

Code:


  <div class="nav-list">
    <a href="#"><i class="fas fa-home"></i><div><span>accueil</span></div></a>
    <a href="#"><i class="fas fa-search"></i><div><span>search</span></div></a>
    <a href="#"><i class="fas fa-bars"></i><div><span>guidebook</span></div></a>
    <a href="#"><i class="fas fa-users"></i><div><span>membres</span></div></a>
    <a href="#"><i class="fas fa-user"></i><div><span>profil</span></div></a>
    <a href="#"><i class="fas fa-envelope"></i><div><span>messages</span></div></a>
    <a href="#"><i class="fas fa-sign-out-alt"></i><div><span>déconnexion</span></div></a>
    </div> <!-- fin liste -->

CSS

Code:

.nav-list, .nav-droite {
  align-items:center;
  display: flex;
  padding-right:10px;  
}

.nav-list a {
  display: flex;
  align-items:center;
  gap: 15px;
}

.nav-list div {
  overflow: hidden;
  margin-right: 5px;
  padding:5px 0;
  background-color: var(--neutral);
  transition: max-width 0.45s;
  max-width: 0;
  border-radius: 5px;
}

.nav-list span {
  padding:10px;
}

.nav-list a:hover div {
  max-width: 100px;
}

[MlleAlys]

Bonjour,
Avec une largeur max qui ne laisserait voir que l'icone en premier lieu, puis l'ensemble du lien au survol ?
Quelque chose comme ceci :

Code:

#modernbb-nav-menu a.mainmenu {
  max-width: 18px;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  transition: max-width 0.5s linear;
}
#modernbb-nav-menu a.mainmenu:hover {
  max-width: 200px;
}

[MlleSnake]

Impeccable, ça fonctionne ! Si simple en plus

Merci beaucoup !